js как сделать карусель обзор (review) из изображение

Question

Как сделать карусель, которая будет показывать обзор, на пример товара банки горошка по кругу

То есть имеется 24 кадра, которые ежесекундно меняются, делая вид вращающегося продукта, создавая видимость 3D обзора.

Вот самостоятельное вращение, правильно работает, стрелками влево вправо, тоже правильно работает, а вот если свайп, то картинка движется к краю, а мне нужно, что бы она менялась на следующую а не двигалась к краю

Вот мой пример работы с помощью OWL.Carousel:

$('.d3-carousel').owlCarousel({
    stagePadding: 0,
    margin: 0,
    loop: true,
    nav: true,
    dots: false,
    animateOut: 'slideOutDown',
    animateIn: 'flipInX',
    autoplay:true,
    autoplayTimeout:130,
    autoplayHoverPause:true,
    smartSpeed: 0,
    responsive: {
        0: {
            items: 1
        },
        600: {
            items: 1
        },
        1000: {
            items: 1
        }
    },
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">

<!--OWL Carusel-->
<link rel="stylesheet" href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.theme.default.min.css">

<script src="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/owl.carousel.js"></script>

<div class="container py-5" style="max-width: 500px !important">

    <div class="border">

    <div class="d3-carousel owl-carousel owl-theme">
        <div class="item">
            <img src="http://car.synapsepro.site/image/001.jpg">
        </div> 
        <div class="item">
            <img src="http://car.synapsepro.site/image/002.jpg">
        </div> 
        <div class="item">
            <img src="http://car.synapsepro.site/image/003.jpg">
        </div> 
        <div class="item">
            <img src="http://car.synapsepro.site/image/004.jpg">
        </div> 
        <div class="item">
            <img src="http://car.synapsepro.site/image/005.jpg">
        </div> 
        <div class="item">
            <img src="http://car.synapsepro.site/image/006.jpg">
        </div> 
        <div class="item">
            <img src="http://car.synapsepro.site/image/007.jpg">
        </div> 
        <div class="item">
            <img src="http://car.synapsepro.site/image/008.jpg">
        </div> 
        <div class="item">
            <img src="http://car.synapsepro.site/image/009.jpg">
        </div> 
        <div class="item">
            <img src="http://car.synapsepro.site/image/010.jpg">
        </div> 
        <div class="item">
            <img src="http://car.synapsepro.site/image/011.jpg">
        </div> 
        <div class="item">
            <img src="http://car.synapsepro.site/image/012.jpg">
        </div> 
        <div class="item">
            <img src="http://car.synapsepro.site/image/013.jpg">
        </div> 
        <div class="item">
            <img src="http://car.synapsepro.site/image/014.jpg">
        </div> 
        <div class="item">
            <img src="http://car.synapsepro.site/image/015.jpg">
        </div> 
        <div class="item">
            <img src="http://car.synapsepro.site/image/016.jpg">
        </div> 
        <div class="item">
            <img src="http://car.synapsepro.site/image/017.jpg">
        </div> 
        <div class="item">
            <img src="http://car.synapsepro.site/image/018.jpg">
        </div> 
        <div class="item">
            <img src="http://car.synapsepro.site/image/019.jpg">
        </div> 
        <div class="item">
            <img src="http://car.synapsepro.site/image/020.jpg">
        </div> 
        <div class="item">
            <img src="http://car.synapsepro.site/image/021.jpg">
        </div> 
        <div class="item">
            <img src="http://car.synapsepro.site/image/022.jpg">
        </div> 
        <div class="item">
            <img src="http://car.synapsepro.site/image/023.jpg">
        </div> 
        <div class="item">
            <img src="http://car.synapsepro.site/image/024.jpg">
        </div> 
        <div class="item">
            <img src="http://car.synapsepro.site/image/024.jpg">
        </div> 
    </div>

    </div>

</div>

Так же ссылка на редактор: https://jsfiddle.net/synapse3/Lbn250eh/

Answer 1

Так никто и не ответил Но спустя некоторое время поисков - данный вариант мне вполне подошел Называется не карусель а Катушка пример который я использовал в своих целях pisi-Reel : http://jquery.vostrel.cz/reel

БЛОГ НА HUSL

js как сделать карусель обзор (review) из изображение

Ответы (1 шт):