HTML - Card Slider

 
Vista:
sin imagen de perfil
Val: 7
Ha aumentado su posición en 52 puestos en HTML (en relación al último mes)
Gráfica de HTML

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 claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de Joel
Val: 341
Plata
Ha mantenido su posición en HTML (en relación al último mes)
Gráfica de HTML

Card Slider

Publicado por Joel (89 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 claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil
Val: 7
Ha aumentado su posición en 52 puestos en HTML (en relación al último mes)
Gráfica de HTML

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
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar