Форум

Mazaxaka_6630 · #11 (**permalink**) 29.04.2020, 22:39

Rise,
Большое спасибо вам!

makdim · #12 (**permalink**) 22.12.2020, 17:23

<div class="swiper-container swiperExp">
    <div class="swiper-wrapper">
        <div class="swiper-slide"><img src="[*image*]" alt="[*pagetitle*]"></div>
        <div class="swiper-slide"><img src="[*image*]" alt="[*pagetitle*]"></div>
        <div class="swiper-slide"><img src="[*image*]" alt="[*pagetitle*]"></div>
        <div class="swiper-slide"><img src="[*image*]" alt="[*pagetitle*]"></div>
    </div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
</div>
<div class="swiper-container swiperOneMain">
    <div class="swiper-wrapper">
        <div class="swiper-slide"><img src="[*image*]" alt="[*pagetitle*]"></div>
        <div class="swiper-slide"><img src="[*image*]" alt="[*pagetitle*]"></div>
        <div class="swiper-slide"><img src="[*image*]" alt="[*pagetitle*]"></div>
        <div class="swiper-slide"><img src="[*image*]" alt="[*pagetitle*]"></div>
    </div>
</div>

const slider = document.querySelector('.swiperOneMain');
const sliderNav = document.querySelector('.swiperExp');

let mySwiperNav = new Swiper(sliderNav, {
    slidesPerView: 5,
    spaceBetween: 10,
    loopedSlides: 5,
    freeMode: true,
    loop: true,
    direction: 'vertical',
});

let mySwiper = new Swiper(slider, {

    spaceBetween: 10,
    loopedSlides: 5,
    loop: true,
    navigation: {
        nextEl: 'swiper-button-next',
        prevEl: 'swiper-button-prev',
    },
    thumbs: {
        swiper: mySwiperNav,
    }
});

var thumbs = document.querySelectorAll('.swiperExp .swiper-slide');
for (var i = 0; i < thumbs.length; i++) thumbs[i].addEventListener('mouseover', function() { this.click() });

</script>

Не понимаю почему не работает(
help)

рони · #13 (**permalink**) 22.12.2020, 18:24

makdim,
Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:

[html run]
... минимальный код страницы с вашей проблемой
[/html]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

makdim · #14 (**permalink**) 22.12.2020, 18:43

Сообщение от рони

makdim,
Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:

[html run]
... минимальный код страницы с вашей проблемой
[/html]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

Да спасибо так гораздо лучше!)
извиняюсь первый раз тут)

рони · #15 (**permalink**) 22.12.2020, 19:11

Сообщение от makdim

Не понимаю почему не работает(

что не работает?

Сообщение от makdim

Да спасибо так гораздо лучше!)

здесь лучше макет целиком а не блоками

Сообщение от makdim

nextEl: 'swiper-button-next',
20
prevEl: 'swiper-button-prev',

css селекторы не корректные, нужна точка в начале класса.

makdim · #16 (**permalink**) 22.12.2020, 19:40

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

Если есть идеи как это сделать, был бы очень признателен!
спасибо!

Ниже накидал тестовый макет
ps селекторы поправил. спасибо!

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
</head>

<body>
    <div class="containerFlex">
        <div class="swiper-container swiperExp">
            <div class="swiper-wrapper">
                <div class="swiper-slide"><img src="https://img.5element.by/upload/rk/121/121c5845d88f32b9dd3b439f81e286d3.jpg" alt=""></div>
                <div class="swiper-slide"><img src="https://img.5element.by/upload/rk/121/121c5845d88f32b9dd3b439f81e286d3.jpg" alt=""></div>
                <div class="swiper-slide"><img src="https://img.5element.by/upload/rk/121/121c5845d88f32b9dd3b439f81e286d3.jpg" alt=""></div>
                <div class="swiper-slide"><img src="https://img.5element.by/upload/rk/121/121c5845d88f32b9dd3b439f81e286d3.jpg" alt=""></div>
                <div class="swiper-slide"><img src="https://img.5element.by/upload/rk/121/121c5845d88f32b9dd3b439f81e286d3.jpg" alt=""></div>
            </div>
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>
        </div>
        <div class="swiper-container swiperOneMain">
            <div class="swiper-wrapper">
                <div class="swiper-slide"><img src="https://img.5element.by/upload/rk/121/121c5845d88f32b9dd3b439f81e286d3.jpg" alt=""></div>
                <div class="swiper-slide"><img src="https://img.5element.by/upload/rk/121/121c5845d88f32b9dd3b439f81e286d3.jpg" alt=""></div>
                <div class="swiper-slide"><img src="https://img.5element.by/upload/rk/121/121c5845d88f32b9dd3b439f81e286d3.jpg" alt=""></div>
                <div class="swiper-slide"><img src="https://img.5element.by/upload/rk/121/121c5845d88f32b9dd3b439f81e286d3.jpg" alt=""></div>
                <div class="swiper-slide"><img src="https://img.5element.by/upload/rk/121/121c5845d88f32b9dd3b439f81e286d3.jpg" alt=""></div>
            </div>
        </div>
    </div>


    <style>
    .containerFlex {
        display: flex;
        justify-content: space-between;
        width: 100%;
        max-width: 1024px;
        min-width: 0;
        max-height: 500px;
    }

    .swiperExp {
        min-width: 0;
    }

    .swiperOneMain {
        min-width: 0;
    }

    .swiperExp img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .swiperOneMain img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    </style>

    <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
    <script>
    const slider = document.querySelector('.swiperOneMain');
    const sliderNav = document.querySelector('.swiperExp');

    let mySwiperNav = new Swiper(sliderNav, {
        slidesPerView: 5,
        spaceBetween: 10,
        loopedSlides: 5,
        freeMode: true,
        loop: true,
        direction: 'vertical',
    });

    let mySwiper = new Swiper(slider, {

        spaceBetween: 10,
        loopedSlides: 5,
        loop: true,
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
        thumbs: {
            swiper: mySwiperNav,
        }
    });

    sliderNav.slides.on('mouseenter', function() { 
         slider.slideTo(Swiper.$(this).index()) 
     });
    </script>

</body>

</html>

рони · #17 (**permalink**) 22.12.2020, 19:54

makdim,
строку 95 заменить на

var thumbs = document.querySelectorAll('.swiperExp .swiper-slide');
    thumbs.forEach(el => el.addEventListener('mouseenter', function() {mySwiper.slideTo(el.dataset.swiperSlideIndex) }));

makdim · #18 (**permalink**) 22.12.2020, 20:00

Сообщение от рони

makdim,
строку 95 заменить на

var thumbs = document.querySelectorAll('.swiperExp .swiper-slide');
    thumbs.forEach(el => el.addEventListener('mouseenter', function() {mySwiper.slideTo(el.dataset.swiperSlideIndex) }));

всё работает!
спасибо огромное!

Форум

Справочник

Discord чат

Курсы javascript