Главная > Веб-разработка > Слайдер в Oxygen - вывод количества слайдов и номер слайда

Слайдер в Oxygen - вывод количества слайдов и номер слайда

28.10.2022

Теги:

css, hook, html, jQuery, Oxygen, wordpress

Необходимо было сделать чтобы переключалки слайдера были внизу и показывалось количество слайдов и номер слайда.

Для этого добавляем вот такой код в сниппет, и всё работает.

add_action( 'wp_head', function () { ?>
<script type="text/javascript">
window.onload=function(){
    jQuery('nav.unslider-nav').each(function() {
		var text = jQuery(this).find('li:last-child').text(); // находим выбранную опцию и берем из нее текст
		jQuery(this).append('/ '+text); 
		

		
  	});
}
</script>
<style>
	nav.unslider-nav {
    	position: absolute;
    	bottom: 0;
    	left: calc(50% - 80px);
		color: #fff;
    	background: rgb(45,176,2);
    	background: -moz-linear-gradient(left, rgba(45,176,2,1) 0%, rgba(56,215,73,1) 100%);
    	background: -webkit-linear-gradient(left, rgba(45,176,2,1) 0%,rgba(56,215,73,1) 100%);
    	background: linear-gradient(to right, rgba(45,176,2,1) 0%,rgba(56,215,73,1) 100%);
    	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2db002', endColorstr='#38d749',GradientType=1 );
		
		padding: 20px 60px 10px 60px;
		display: flex;
    	flex-direction: row;
    	align-items: center;
    	justify-content: center;
		font-size:22px;
	}
	body nav.unslider-nav ol li {
		text-indent:0;
    	width:auto;
    	height: auto;
    	margin: 0 4px;
    	background: transparent;
    	border-radius: 0px;
    	overflow: hidden;
    	border: none;
    	cursor: pointer;
		box-shadow:none;
		display: none;
		font-size:22px;
	}
	body nav.unslider-nav ol li.unslider-active {
		border: none !important;
		background:transparent !important;
		box-shadow:none !important;
		display:block;
	}
	body .unslider-arrow.prev {
		top: calc(100% - 31px);
		left: calc(50% - 75px) !important;
		background:transparent;
	}
	body .unslider-arrow.next {
		top: calc(100% - 23px);
		right: calc(50% - 85px) !important;
		background:transparent;
	}
	body .unslider-arrow:before {
		content: "\e902";
		color:#ffffff;
		font-family: 'intersite' !important;
    	line-height: 1;
    	font-size: 25px;
		position: absolute;
    	top: 0;
    	left: 0;
    	text-indent: 0;
	}
</style>
<?php } );

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

add_action( 'wp_head', function () { ?>

window.onload=function(){

jQuery('nav.unslider-nav').each(function() {

var text = jQuery(this).find('li:last-child').text(); // находим выбранную опцию и берем из нее текст

jQuery(this).append('/ '+text);

});

}

</script>

<style>

nav.unslider-nav {

position: absolute;

bottom: 0;

left: calc(50% - 80px);

color: #fff;

background: rgb(45,176,2);

background: -moz-linear-gradient(left, rgba(45,176,2,1) 0%, rgba(56,215,73,1) 100%);

background: -webkit-linear-gradient(left, rgba(45,176,2,1) 0%,rgba(56,215,73,1) 100%);

background: linear-gradient(to right, rgba(45,176,2,1) 0%,rgba(56,215,73,1) 100%);

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2db002', endColorstr='#38d749',GradientType=1 );

padding: 20px 60px 10px 60px;

display: flex;

flex-direction: row;

align-items: center;

justify-content: center;

font-size:22px;

}

body nav.unslider-nav ol li {

text-indent:0;

width:auto;

height: auto;

margin: 0 4px;

background: transparent;

border-radius: 0px;

overflow: hidden;

border: none;

cursor: pointer;

box-shadow:none;

display: none;

font-size:22px;

}

body nav.unslider-nav ol li.unslider-active {

border: none !important;

background:transparent !important;

box-shadow:none !important;

display:block;

}

body .unslider-arrow.prev {

top: calc(100% - 31px);

left: calc(50% - 75px) !important;

background:transparent;

}

body .unslider-arrow.next {

top: calc(100% - 23px);

right: calc(50% - 85px) !important;

background:transparent;

}

body .unslider-arrow:before {

content: "\e902";

color:#ffffff;

font-family: 'intersite' !important;

line-height: 1;

font-size: 25px;

position: absolute;

top: 0;

left: 0;

text-indent: 0;

}

</style>

<?php } );

MENEX.RU

Слайдер в Oxygen - вывод количества слайдов и номер слайда

Рекомендуем еще эти статьи

WP Grid Builder и Oxygen, фильтр записей

Шорткод для отображения шаблонов Oxygen

Набор своих иконок или эмодзи на сайте WordPress

Сортировка товаров по наличию в Woocommerce

Подгружать HTML в DIV

Простой слайдер bxslider для WordPress