HTML - Card Slider

Val: 4

Card Slider

Publicado por wardguez (3 intervenciones) el 10/10/2019 22:42:54

Buenas noches,

He logrado realizar un Card Slider con 6 imágenes pero siempre me muestra la serie de 3 en 3 pero si quisiera mostrar la seria de 2 en 2 o que muestre en pantalla 4 y queden 2???...

Alguien me podría ayudar?

Saludos

Valora esta pregunta

Me gusta: Está pregunta es útil y esta clara

No me gusta: Está pregunta no esta clara o no es útil

0

Responder

Pos: 1

Val: 1.453

Card Slider

Publicado por Joel (460 intervenciones) el 11/10/2019 08:13:06

Hola Wadguez, puedes publicar tu código para intentar ayudarte?

Valora esta respuesta

Me gusta: Está respuesta es útil y esta clara

No me gusta: Está respuesta no esta clara o no es útil

0

Comentar

Pos: 318

Val: 4

Card Slider

Publicado por wardguez (3 intervenciones) el 11/10/2019 09:22:06

Disculpen...

Entiendo que el problema radica porque en javascript tengo la parte de Navigation para que muestre el anterior y el siguiente... pero no sé o no he encontrado la forma de decir que muestre un número exacto de items o que muestre los dos anteriores o y los dos siguientes...

Gracias de antemano...

Mi código es:

La parte de HTML

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

75

76

77

78

79

80

81

82

83

84

85

86

87

88

<div class="wrapper">

  <div class="background">

    <img src="https://res.cloudinary.com/muhammederdem/image/upload/v1537132206/news-slider/background.jpg" alt="">

  </div>

  <div class="item-bg"></div>

  <div class="news-slider">

    <div class="news-slider__wrp swiper-wrapper">

      <div class="news-slider__item swiper-slide">

        <a href="#" class="news__item">

          <div class="news__img">

            <img src="images/1.jpg" alt="news" width="50%" height="auto%">

          </div>

        </a>

      </div>

      <div class="news-slider__item swiper-slide">

        <a href="#" class="news__item">

          <div class="news__img">

              <img src="images/2.jpg" alt="news" width="50%" height="auto%">

          </div>

        </a>

      </div>

      <div class="news-slider__item swiper-slide">

        <a href="#" class="news__item">

          <div class="news__img">

              <img src="images/3.jpg" alt="news" width="50%" height="auto%">

          </div>

        </a>

      </div>

      <div class="news-slider__item swiper-slide">

        <a href="#" class="news__item">

          <div class="news__img">

              <img src="images/4.jpg" alt="news" width="50%" height="auto%">

          </div>

        </a>

      </div>

      <div class="news-slider__item swiper-slide">

        <a href="#" class="news__item">

          <div class="news__img">

              <img src="images/5.jpg" alt="news" width="50%" height="auto">

          </div>

        </a>

      </div>

      <div class="news-slider__item swiper-slide">

        <a href="#" class="news__item">

          <div class="news__img">

              <img src="images/6.jpg" alt="news" width="50%" height="auto%">

          </div>

        </a>

      </div>

    </div>

    <div class="news-slider__ctr">

      <div class="news-slider__arrows">

        <!-- Mostramos el anterior -->

        <button class="news-slider__arrow news-slider-prev">

          <span class="icon-font">

            <svg class="icon icon-arrow-left"><use xlink:href="#icon-arrow-left"></use></svg>

          </span>

        </button>

        <!-- Mostramos el siguiente -->

        <button class="news-slider__arrow news-slider-next">

          <span class="icon-font">

            <svg class="icon icon-arrow-right"><use xlink:href="#icon-arrow-right"></use></svg>

          </span>

        </button>

      </div>

      <div class="news-slider__pagination"></div>

    </div>

  </div>

</div>

#####

La parte de JavaScript

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

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

var bg = document.querySelector('.item-bg');

var items = document.querySelectorAll('.news__item');

var item = document.querySelector('.news__item');

function cLog(content) {

    console.log(content)

if($(window).width() > 800) {

    $(document).on("mouseover", ".news__item", function (_event, _element) {

        var newsItem = document.querySelectorAll('.news__item');

        newsItem.forEach(function (element, index) {

            element.addEventListener('mouseover', function () {

                var x = this.getBoundingClientRect().left;

                var y = this.getBoundingClientRect().top;

                var width = this.getBoundingClientRect().width;

                var height = this.getBoundingClientRect().height;

                $('.item-bg').addClass('active');

                $('.news__item').removeClass('active');

                // $('.news__item').removeClass('active');

                bg.style.width = width + 'px';

                bg.style.height = height + 'px';

                bg.style.transform = 'translateX(' + x + 'px ) translateY(' + y + 'px)';

});

            element.addEventListener('mouseleave', function () {

                $('.item-bg').removeClass('active');

                $('.news__item').removeClass('active');

});

});

});

var swiper = new Swiper('.news-slider', {

    effect: 'coverflow',

    grabCursor: true,

    loop: true,

    centeredSlides: true,

    keyboard: true,

    spaceBetween: 0,

    slidesPerView: 'auto',

    speed: 300,

    coverflowEffect: {

        rotate: 0,

        stretch: 0,

        depth: 0,

        modifier: 3,

        slideShadows: false

},

    breakpoints: {

        480: {

            spaceBetween: 0,

            centeredSlides: true

},

    simulateTouch: true,

    navigation: {

        nextEl: '.news-slider-next',

        prevEl: '.news-slider-prev',

        nextEl1: '.news-slider-next',

        prevEl1: '.news-slider-prev'

},

    pagination: {

        el: '.news-slider__pagination',

        clickable: true

},

    on: {

        init: function () {

            var activeItem = document.querySelector('.swiper-slide-active');

            var sliderItem = activeItem.querySelector('.news__item');

            $('.swiper-slide-active .news__item').addClass('active');

            var x = sliderItem.getBoundingClientRect().left;

            var y = sliderItem.getBoundingClientRect().top;

            var width = sliderItem.getBoundingClientRect().width;

            var height = sliderItem.getBoundingClientRect().height;

            $('.item-bg').addClass('active');

            bg.style.width = width + 'px';

            bg.style.height = height + 'px';

            bg.style.transform = 'translateX(' + x + 'px ) translateY(' + y + 'px)';

});

swiper.on('touchEnd', function () {

    $('.news__item').removeClass('active');

    $('.swiper-slide-active .news__item').addClass('active');

});

swiper.on('slideChange', function () {

    $('.news__item').removeClass('active');

});

swiper.on('slideChangeTransitionEnd', function () {

    $('.news__item').removeClass('active');

    var activeItem = document.querySelector('.swiper-slide-active');

    var sliderItem = activeItem.querySelector('.news__item');

    $('.swiper-slide-active .news__item').addClass('active');

    var x = sliderItem.getBoundingClientRect().left;

    var y = sliderItem.getBoundingClientRect().top;

    var width = sliderItem.getBoundingClientRect().width;

    var height = sliderItem.getBoundingClientRect().height;

    $('.item-bg').addClass('active');

    bg.style.width = width + 'px';

    bg.style.height = height + 'px';

    bg.style.transform = 'translateX(' + x + 'px ) translateY(' + y + 'px)';

});

Valora esta respuesta

0

Comentar