Слайдер горизонтальную ленту для фото, с открытием большого изображения по клику?

Question

[Андрей Филимонов]

Здравствуйте, ищу слайдер, примерно такой же как сейчас стоит тут

но нужно, чтобы при клике на изображение, оно становилось больше, разворачивалось. Подкиньте пример пожалуйста. Может этот знаете как доработать? И чтобы лента не дёргалась назад.
Знаете ли примеры только на css? Можно без автоплея, но с разворотом

Answer 1

[AlexRas]

https://owlcarousel2.github.io/OwlCarousel2/demos/...

Берете такую карусель

И fancyapps.com/fancybox/3 для открытия больших картинок

Разметка такая:

<div class="owl-carousel owl-theme">
    <div class="item">
        <a href="img-big.png" data-fancybox>
            <img src="img-mini.png" alt="preview">
        </a>
    </div>
    <div class="item">
        <a href="img-big.png" data-fancybox>
            <img src="img-mini.png" alt="preview">
        </a>
    </div>
    <div class="item">
        <a href="img-big.png" data-fancybox>
            <img src="img-mini.png" alt="preview">
        </a>
    </div>
    <div class="item">
        <a href="img-big.png" data-fancybox>
            <img src="img-mini.png" alt="preview">
        </a>
    </div>
    <div class="item">
        <a href="img-big.png" data-fancybox>
            <img src="img-mini.png" alt="preview">
        </a>
    </div>
    <div class="item">
        <a href="img-big.png" data-fancybox>
            <img src="img-mini.png" alt="preview">
        </a>
    </div>
    <div class="item">
        <a href="img-big.png" data-fancybox>
            <img src="img-mini.png" alt="preview">
        </a>
    </div>
    <div class="item">
        <a href="img-big.png" data-fancybox>
            <img src="img-mini.png" alt="preview">
        </a>
    </div>
    <div class="item">
        <a href="img-big.png" data-fancybox>
            <img src="img-mini.png" alt="preview">
        </a>
    </div>
    <div class="item">
        <a href="img-big.png" data-fancybox>
            <img src="img-mini.png" alt="preview">
        </a>
    </div>
</div>

Js такой:

$('.owl-carousel').owlCarousel({
    loop:true,
    margin:10,
    nav:false,
    items:5
})

Comments

[Андрей Филимонов]

Спасибо. Подскажите, что значит взять такую карусель? Как эти Owl карусели устанавливают? везде так пишут, как будто это само собой разумеющееся. сделал ПЕН, ничего не работает

[AlexRas]

Андрей Филимонов: Для того чтобы работало надо подключить карусель и fancybox

У них в документациях все расписано

P.S. это само собой разумеющееся

[AlexRas]

Андрей Филимонов: https://jsfiddle.net/ejL3d44z/ вот рабочий пример

[Андрей Филимонов]

AlexRas: спасибо огромное!! поставил, сделал
можете подсказать, как поставить на autoplay всегда? поставил true, но слайдер перестаёт двигаться через некоторое время. и скорость побыстрее

[AlexRas]

Андрей Филимонов: https://jsfiddle.net/ejL3d44z/1/

Answer 2

[Артур Карапетян]

Любой слайдер в item помещаете попап для картинки (magnific popup или fancybox)

Comments

[Андрей Филимонов]

извините, не понимаю. как в тот слайдер поместить попап для картинки, и чтобы он работал? он ломается, перестаёт крутиться

[Артур Карапетян]

Андрей Филимонов: как-то так

[Андрей Филимонов]

Артур: там один слайд на страницу, нужно 5,6,7 на странице, в мобильном виде 3-4

[Андрей Филимонов]

наверняка есть готовые варианты. мир большой, неужто больше никому такой слайдер был не нужен?

[Артур Карапетян]

Андрей Филимонов: Вы издеваетесь? Неужели так трудно допилить самому то, что показано в примере?

[Андрей Филимонов]

Артур: извините, да, трудно. Я видел кучу примеров, которые по отдельности подходят по своим свойствам, но не могу найти, чтобы всё сочеталось в одном. Он есть, я его просто не могу найти