Creating a carousel with a curved dial or wheel: A step-by-step guide

My goal is to create a carousel with curved container and downward movement for items not in focus. The description should change based on the focused item, and I prefer the carousel not to autoplay.

via GIPHY

I've been searching online for a solution using keywords like "dial/wheel carousel", but haven't found exactly what I'm looking for. Any suggestions on how to achieve a similar effect as shown in the GIF would be greatly appreciated. Thank you.

$(function(){

    $('.loop').on('initialized.owl.carousel translate.owl.carousel', function(e){
        idx = e.item.index;
        $('.owl-item.big').removeClass('big');
        $('.owl-item.medium').removeClass('medium');
        $('.owl-item').eq(idx).addClass('big');
        $('.owl-item').eq(idx-1).addClass('medium');
        //$('.owl-item').eq(idx-2).addClass('medium');
        $('.owl-item').eq(idx+1).addClass('medium');
        //$('.owl-item').eq(idx+2).addClass('medium');
    });


    $('.loop').owlCarousel({
        center: true,
        items:5,
        loop:true,
        margin:10,
        autoplay: true,
        autoPlay: 2000,
        stagePadding: 30
    })
}); 
.owl-carousel .owl-item.big div {background:#ac0000 !important;}

.owl-carousel .owl-item.medium div {background:#008000 !important;
transform: scale(0.9);
object-position: 5px 50%;}

.owl-carousel .owl-item div {background:#4B0082 !important;
transform: scale(0.6);
object-position: 0px 80%;}

.owl-carousel.owl-drag .owl-item.center .item {
    background: rgb(25, 0, 255) ;
    transform: scale(1.5);
  }

.owl-stage{
    left:-30
}

.owl-carousel .animated { 
  animation-duration: 5000ms;
  animation-fill-mode: both; }
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" integrity="sha512-tS3S5qG0BlhnQROyJXvNjeEM4UpMXHrQfTGmbQ1gKmelCxlSEBUaxhRBj/EFTzpbP4RVSrpEikbmdJobCvhE3g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css" integrity="sha512-sMXtMNL1zRzolHYKEujM2AqCLUR9F2C4/05cdbxjjLSRvMQIciEPCQZo++nk7go3BtSuK9kfa/s+a4f4i5pLkw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
  <link rel='stylesheet' href='http://owlcarousel2.github.io/OwlCarousel2/assets/css/docs.theme.min.css' />
</head>
<div id="demos">
<div class="owl-carousel loop">
  <div class="item"><h4>1</h4></div>
        <div class="item"><h4>2</h4></div>
        <div class="item"><h4>3</h4></div>
        <div class="item"><h4>4</h4></div>
        <div class="item"><h4>5</h4></div>
        <div class="item"><h4>6</h4></div>
        <div class="item"><h4>7</h4></div>
        <div class="item"><h4>8</h4></div>
        <div class="item"><h4>9</h4></div>
        <div class="item"><h4>10</h4></div>
        <div class="item"><h4>11</h4></div>
        <div class="item"><h4>12</h4></div>
</div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js" integrity="sha512-bPs7Ae6pVvhOSiIcyUClR7/q2OAsRiovw4vAkX+zJbw3ShAeeqezq50RIIcIURq7Oa20rW2n2q+fyXBNcU9lrw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

jquerycsscarouselcurveowl-carousel-2

Answer №1

You were so close to completing it!

Check out the OwlCarousel documentation for the "SlideTransition" option you needed to add:

To achieve a smoother transition on your "transform: scale()", consider adding a "transition: transform 0.4s" where you call your scale() function, adjusting the time as needed.

By making these two adjustments, you should be able to achieve the desired outcome.

$(function(){

    $('.loop').on('initialized.owl.carousel translate.owl.carousel', function(e){
        idx = e.item.index;
        $('.owl-item.big').removeClass('big');
        $('.owl-item.medium').removeClass('medium');
        $('.owl-item').eq(idx).addClass('big');
        $('.owl-item').eq(idx-1).addClass('medium');
        //$('.owl-item').eq(idx-2).addClass('medium');
        $('.owl-item').eq(idx+1).addClass('medium');
        //$('.owl-item').eq(idx+2).addClass('medium');
    });


    $('.loop').owlCarousel({
        center: true,
        items:5,
        loop:true,
        margin:10,
        autoplay: true,
        autoPlay: 2000,
        stagePadding: 30,
        slideTransition: "linear"
    })
});
.owl-carousel .owl-item.big div {background:#ac0000 !important;}

.owl-carousel .owl-item.medium div {background:#008000 !important;
transform: scale(0.9);
object-position: 5px 50%;
transition: transform 0.4s;
}

.owl-carousel .owl-item div {background:#4B0082 !important;
transform: scale(0.6);
object-position: 0px 80%;
transition: transform 0.4s;}

.owl-carousel.owl-drag .owl-item.center .item {
    background: rgb(25, 0, 255) ;
    transform: scale(1.5);
    transition: transform 0.4s;
  }

.owl-stage{
    left:-30
}

.owl-carousel .animated { 
  animation-duration: 5000ms;
  animation-fill-mode: both; }
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" integrity="sha512-tS3S5qG0BlhnQROyJXvNjeEM4UpMXHrQfTGmbQ1gKmelCxlSEBUaxhRBj/EFTzpbP4RVSrpEikbmdJobCvhE3g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css" integrity="sha512-sMXtMNL1zRzolHYKEujM2AqCLUR9F2C4/05cdbxjjLSRvMQIciEPCQZo++nk7go3BtSuK9kfa/s+a4f4i5pLkw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
  <link rel='stylesheet' href='http://owlcarousel2.github.io/OwlCarousel2/assets/css/docs.theme.min.css' />
</head>
<div id="demos">
<div class="owl-carousel loop">
  <div class="item"><h4>1</h4></div>
        <div class="item"><h4>2</h4></div>
        <div class="item"><h4>3</h4></div>
        <div class="item"><h4>4</h4></div>
        <div class="item"><h4>5</h4></div>
        <div class="item"><h4>6</h4></div>
        <div class="item"><h4>7</h4></div>
        <div class="item"><h4>8</h4></div>
        <div class="item"><h4>9</h4></div>
        <div class="item"><h4>10</h4></div>
        <div class="item"><h4>11</h4></div>
        <div class="item"><h4>12</h4></div>
</div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js" integrity="sha512-bPs7Ae6pVvhOSiIcyUClR7/q2OAsRiovw4vAkX+zJbw3ShAeeqezq50RIIcIURq7Oa20rW2n2q+fyXBNcU9lrw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Flexbox CSS Card Layout Behavior

Looking to achieve a specific design effect without relying on Semantic UI? Check out the codepen link here: https://codepen.io/anon/pen/YxBOax <div class="ui container"> <div class="ui four cards stackable"> <div class="teal card"> ...

htmlcsssemantic-uicss-grid

Can you explain the purpose of this.element within a jQuery function?

Recently, I came across an enlightening explanation of the jQuery UI combobox by Jörn Zaefferer. If you're interested in checking it out as well, here's the link. One particular line of code that caught my attention was: var select = this.eleme ...

jquery

JavaScript's connection to the CSS property visibility seems to be causing some issues

The Javascript code seems to be ignoring the CSS display property, even though it's set in the style sheet. I added a debugger statement and noticed that the display value was empty. I've been staring at this for some time now, so I must be overl ...

javascriptcss

Loading local JSON data using Select2 with multiple keys can greatly enhance the functionality

Comparing the select2 examples, it is evident that the "loading remote data" example contains more information in the response json compared to the "loading array data" example. I am interested in knowing if it is feasible to load a local json file with a ...

javascriptjqueryjsonjquery-select2

Controls that shift a DIV in either direction

I've been working on making a div scroll left or right with either a mouseover effect or click, but I can't seem to figure out what's going wrong. My initial attempt was straightforward: <body> <div id="innerscroll"></div> ...

javascriptjqueryanimation

How can I use jQuery to reload the page only at certain intervals?

I'm currently using jQuery to reload a page with the code provided below: <script type="text/javascript"> $(document).ready(function(){ setInterval(function() { window.location.reload(); }, 10000); }) & ...

javascriptjqueryhtmlpage-refresh

How about using JQuery to smoothly fade in and out?

I've been trying to figure this out for hours $('#position-name').html('Successfully Changed').fadeOut(1000); $('#position-name').html('New Name').fadeIn(); While it seems simple, I can't understa ...

jquery

The measure of the leaflet map's vertical dimension in a Shiny module application

I'm facing an issue while trying to incorporate my small app as a module within my larger app. Everything seems to be working fine except for the height of the leaflet map. In the standalone app, I had: ui <- fluidPage( tags$style(type = "te ...

cssshinymoduleleafletheight

Move your cursor over a specific element to change the div located before it, rather than the one after

Is it possible to have <div> B affect <div> A on hover, instead of the other way around? I've only seen code for the reverse using (+) in CSS. #b:hover + #a { background: #ccc } <div id="a">Div A</div> <div id="b"> ...

htmlcss

A step-by-step guide on implementing a callback function

I am eager to incorporate a callback into this script - specifically the third callback onSlideChangeStart(swiper) found at http://idangero.us/swiper/api/#.V9CMp5grJlY. Since I have never worked with callbacks before, I am unsure of where to begin. In es ...

javascriptjquerycallbackswiper.js

Is there a way to retrieve a specific section of a webpage using an AJAX GET request?

When making a GET request to the server, we can retrieve an entire page. However, what if I only need the content of a specific div on that page? Do I have to fetch the entire page and then use jQuery's find() method to extract the div content? Or is ...

ajaxhttpjqueryget

Looking to design an interactive grid for generating dynamic thumbnails

I am a beginner in the field of web development and I have a desire to create a website for showcasing my portfolio. This website should feature project thumbnails along with brief descriptions, all of which should be displayed dynamically. Although I poss ...

phpjavascriptjqueryhtmlcss

Experiencing issues with exporting <SVG> file due to corruption

I received some downvotes on my previous post, and I'm not sure why. My question was clear, and I provided a lot of information. Let's give it another shot. My issue is with exporting <SVG> files from an HTML document. When I try to open t ...

javascripthtmlcsssvg

Leverage variables in JavaScript to establish a unique style

function AdjustScale(){ scaleX = window.innerWidth / 1024; scaleY = window.innerHeight / 768; element = document.getElementById("IFM"); element.style.transform = "scale(" + scaleX + ", " + scaleY + ")"; } I'm facing an issue with thi ...

javascriptcss

PhoneGap and jQuery prove ineffective in fetching json results from Twitter

I've been working on a project to fetch the most recent 50 tweets with a specific hash tag. The project is built for mobile devices using PhoneGap (0.9.6) and jQuery (1.6.1). Below is my code: function retrieveTweets(hash, numOfResults) { var uri ...

javascriptjqueryjsoncordova

Using jQuery, Ajax, JSON, PHP, and encountering a parsererror

I'm currently facing an issue while attempting to submit a form to a PHP file using $.ajax in jQuery. I've been sending the entire form data as JSON, but upon trying to retrieve the response, I keep encountering the 'parsererror'. Can a ...

phpjqueryajaxjson

The error still pops up despite placing my jQuery inside a closure

After researching numerous posts on jQuery closures on SO, I have adjusted my code based on the suggested solutions. However, I still encounter errors when using certain third-party scripts. The most common error message I come across is: $ is not a fun ...

jquery

Generate a unique splatter design using Cascading Style Sheets

Imagine a circle link that transforms into a playful animation with a pink shape when you move your mouse over it: I'm torn between different ideas on how to achieve this effect. One approach could be to use individual elements for each drop, utilizi ...

javascriptjqueryhtmlcss

Guide on showcasing an icon adjacent to the input fields once they have been validated successfully with the help of jquery plugins

I am struggling with the code below which is supposed to validate the SubmitForm when the button is clicked. It successfully changes the textboxes to red and displays an error message with a symbol if validation fails. However, I am wondering how I can sho ...

jqueryhtmlcssjquery-validate

Adjust the size of an image post-render with the help of Angular or jQuery

Below is my current HTML code: <img width="150" height="150" src="https://d.pcd/image/578434201?hei=75&amp;wid=75&amp;qlt=50,0&amp;op_sharpen=1&amp;op_usm=0.9,0.5,0,0" ng-src="https://d.pcd/image/578434201?hei=75&amp;wid=75&amp; ...

javascriptjqueryangularjs