Learn the steps to create a 3D carousel that spins on its own without the need for manual clicks and pauses once the

Question

Learn the steps to create a 3D carousel that spins on its own without the need for manual clicks and pauses once the

Looking for a solution to create a 3D carousel that rotates continuously without the need for buttons to be clicked, and pauses when the mouse hovers over it, then resumes rotation when the mouse is not hovering over it.

var carousel = $(".carousel"),
    currdeg  = 0;

$(".next").on("click", { d: "n" }, rotate);
$(".prev").on("click", { d: "p" }, rotate);

function rotate(e){
  if(e.data.d=="n"){
    currdeg = currdeg - 60;
  }
  if(e.data.d=="p"){
    currdeg = currdeg + 60;
  }
  carousel.css({
    "-webkit-transform": "rotateY("+currdeg+"deg)",
    "-moz-transform": "rotateY("+currdeg+"deg)",
    "-o-transform": "rotateY("+currdeg+"deg)",
    "transform": "rotateY("+currdeg+"deg)"
  });
}

https://i.sstatic.net/qhtY8.png

For a working example, see this codepen

javascript html css bootstrap-4 carousel

Answer 1

Answer №1

@mamoun othman did an outstanding job in this area! I have incorporated the hover pause/restart feature below:

var slider = $(".slider"), currentDegree  = 0;

function rotateSlide(e){
  currentDegree = currentDegree - 60
  slider.css({
    "-webkit-transform": "rotateY("+currentDegree+"deg)",
    "-moz-transform": "rotateY("+currentDegree+"deg)",
    "-o-transform": "rotateY("+currentDegree+"deg)",
    "transform": "rotateY("+currentDegree+"deg)"
  });
}

// keeping track of state in window.sliderPause
const startSlider = (e) => window.sliderPause = setInterval(rotateSlide, 1000);
const stopSlider = (e) => clearInterval(window.sliderPause);

slider.on({
  // pause slider on mouseover
  'mouseenter': stopSlider,
  // resume slider when mouse is out
  'mouseleave': startSlider
});

// start the slider when the page loads
startSlider();

body {
  background: #333;
  padding: 70px 0;
  font: 15px/20px Arial, sans-serif;
}

.container {
  margin: 0 auto;
  width: 250px;
  height: 200px;
  position: relative;
  perspective: 1000px;
}

.slider {
  height: 100%;
  width: 100%;
  position: absolute;
  transform-style: preserve-3d;
  transition: transform 1s;
}

.item {
  display: block;
  position: absolute;
  background: #000;
  width: 250px;
  height: 200px;
  line-height: 200px;
  font-size: 5em;
  text-align: center;
  color: #FFF;
  opacity: 0.95;
  border-radius: 10px;
}

.a {
  transform: rotateY(0deg) translateZ(250px);
  background: #ed1c24;
}
.b {
  transform: rotateY(60deg) translateZ(250px);
  background: #0072bc;
}
.c {
  transform: rotateY(120deg) translateZ(250px);
  background: #39b54a;
}
.d {
  transform: rotateY(180deg) translateZ(250px);
  background: #f26522;
}
.e {
  transform: rotateY(240deg) translateZ(250px);
  background: #630460;
} 
.f {
  transform: rotateY(300deg) translateZ(250px);
  background: #8c6239;
}

.next, .prev {
  color: #444;
  position: absolute;
  top: 100px;
  padding: 1em 2em;
  cursor: pointer;
  background: #CCC;
  border-radius: 5px;
  border-top: 1px solid #FFF;
  box-shadow: 0 5px 0 #999;
  transition: box-shadow 0.1s, top 0.1s;
}
.next:hover, .prev:hover { color: #000; }
.next:active, .prev:active {
  top: 104px;
  box-shadow: 0 1px 0 #999;
}
.next { right: 5em; }
.prev { left: 5em; }

<div class="container">
  <div class="slider">
    <div class="item a">A</div>
    <div class="item b">B</div>
    <div class="item c">C</div>
    <div class="item d">D</div>
    <div class="item e">E</div>
    <div class="item f">F</div>
  </div>
</div>
<!--<div class="next">Next</div>
<div class="prev">Prev</div>-->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

Answer 2

@mamoun othman did an outstanding job in this area! I have incorporated the hover pause/restart feature below:

var slider = $(".slider"), currentDegree  = 0;

function rotateSlide(e){
  currentDegree = currentDegree - 60
  slider.css({
    "-webkit-transform": "rotateY("+currentDegree+"deg)",
    "-moz-transform": "rotateY("+currentDegree+"deg)",
    "-o-transform": "rotateY("+currentDegree+"deg)",
    "transform": "rotateY("+currentDegree+"deg)"
  });
}

// keeping track of state in window.sliderPause
const startSlider = (e) => window.sliderPause = setInterval(rotateSlide, 1000);
const stopSlider = (e) => clearInterval(window.sliderPause);

slider.on({
  // pause slider on mouseover
  'mouseenter': stopSlider,
  // resume slider when mouse is out
  'mouseleave': startSlider
});

// start the slider when the page loads
startSlider();

body {
  background: #333;
  padding: 70px 0;
  font: 15px/20px Arial, sans-serif;
}

.container {
  margin: 0 auto;
  width: 250px;
  height: 200px;
  position: relative;
  perspective: 1000px;
}

.slider {
  height: 100%;
  width: 100%;
  position: absolute;
  transform-style: preserve-3d;
  transition: transform 1s;
}

.item {
  display: block;
  position: absolute;
  background: #000;
  width: 250px;
  height: 200px;
  line-height: 200px;
  font-size: 5em;
  text-align: center;
  color: #FFF;
  opacity: 0.95;
  border-radius: 10px;
}

.a {
  transform: rotateY(0deg) translateZ(250px);
  background: #ed1c24;
}
.b {
  transform: rotateY(60deg) translateZ(250px);
  background: #0072bc;
}
.c {
  transform: rotateY(120deg) translateZ(250px);
  background: #39b54a;
}
.d {
  transform: rotateY(180deg) translateZ(250px);
  background: #f26522;
}
.e {
  transform: rotateY(240deg) translateZ(250px);
  background: #630460;
} 
.f {
  transform: rotateY(300deg) translateZ(250px);
  background: #8c6239;
}

.next, .prev {
  color: #444;
  position: absolute;
  top: 100px;
  padding: 1em 2em;
  cursor: pointer;
  background: #CCC;
  border-radius: 5px;
  border-top: 1px solid #FFF;
  box-shadow: 0 5px 0 #999;
  transition: box-shadow 0.1s, top 0.1s;
}
.next:hover, .prev:hover { color: #000; }
.next:active, .prev:active {
  top: 104px;
  box-shadow: 0 1px 0 #999;
}
.next { right: 5em; }
.prev { left: 5em; }

<div class="container">
  <div class="slider">
    <div class="item a">A</div>
    <div class="item b">B</div>
    <div class="item c">C</div>
    <div class="item d">D</div>
    <div class="item e">E</div>
    <div class="item f">F</div>
  </div>
</div>
<!--<div class="next">Next</div>
<div class="prev">Prev</div>-->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

Answer 3

Answer №2

I believe this is the solution you are looking for. I utilized the setInterval() function to initiate the animation:

var carousel = $(".carousel"),
    currdeg  = 0;

setInterval(rotate, 1000);

function rotate(e){
  currdeg = currdeg - 60
  /*if(e.data.d=="n"){
    currdeg = currdeg - 60;
  }
  if(e.data.d=="p"){
    currdeg = currdeg + 60;
  }*/
  carousel.css({
    "-webkit-transform": "rotateY("+currdeg+"deg)",
    "-moz-transform": "rotateY("+currdeg+"deg)",
    "-o-transform": "rotateY("+currdeg+"deg)",
    "transform": "rotateY("+currdeg+"deg)"
  });
}

body {
  background: #333;
  padding: 70px 0;
  font: 15px/20px Arial, sans-serif;
}

.container {
  margin: 0 auto;
  width: 250px;
  height: 200px;
  position: relative;
  perspective: 1000px;
}

.carousel {
  height: 100%;
  width: 100%;
  position: absolute;
  transform-style: preserve-3d;
  transition: transform 1s;
}

.item {
  display: block;
  position: absolute;
  background: #000;
  width: 250px;
  height: 200px;
  line-height: 200px;
  font-size: 5em;
  text-align: center;
  color: #FFF;
  opacity: 0.95;
  border-radius: 10px;
}

.a {
  transform: rotateY(0deg) translateZ(250px);
  background: #ed1c24;
}
.b {
  transform: rotateY(60deg) translateZ(250px);
  background: #0072bc;
}
.c {
  transform: rotateY(120deg) translateZ(250px);
  background: #39b54a;
}
.d {
  transform: rotateY(180deg) translateZ(250px);
  background: #f26522;
}
.e {
  transform: rotateY(240deg) translateZ(250px);
  background: #630460;
} 
.f {
  transform: rotateY(300deg) translateZ(250px);
  background: #8c6239;
}

.next, .prev {
  color: #444;
  position: absolute;
  top: 100px;
  padding: 1em 2em;
  cursor: pointer;
  background: #CCC;
  border-radius: 5px;
  border-top: 1px solid #FFF;
  box-shadow: 0 5px 0 #999;
  transition: box-shadow 0.1s, top 0.1s;
}
.next:hover, .prev:hover { color: #000; }
.next:active, .prev:active {
  top: 104px;
  box-shadow: 0 1px 0 #999;
}
.next { right: 5em; }
.prev { left: 5em; }

<div class="container">
  <div class="carousel">
    <div class="item a">A</div>
    <div class="item b">B</div>
    <div class="item c">C</div>
    <div class="item d">D</div>
    <div class="item e">E</div>
    <div class="item f">F</div>
  </div>
</div>
<!--<div class="next">Next</div>
<div class="prev">Prev</div>-->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

Answer 4

I believe this is the solution you are looking for. I utilized the setInterval() function to initiate the animation:

var carousel = $(".carousel"),
    currdeg  = 0;

setInterval(rotate, 1000);

function rotate(e){
  currdeg = currdeg - 60
  /*if(e.data.d=="n"){
    currdeg = currdeg - 60;
  }
  if(e.data.d=="p"){
    currdeg = currdeg + 60;
  }*/
  carousel.css({
    "-webkit-transform": "rotateY("+currdeg+"deg)",
    "-moz-transform": "rotateY("+currdeg+"deg)",
    "-o-transform": "rotateY("+currdeg+"deg)",
    "transform": "rotateY("+currdeg+"deg)"
  });
}

body {
  background: #333;
  padding: 70px 0;
  font: 15px/20px Arial, sans-serif;
}

.container {
  margin: 0 auto;
  width: 250px;
  height: 200px;
  position: relative;
  perspective: 1000px;
}

.carousel {
  height: 100%;
  width: 100%;
  position: absolute;
  transform-style: preserve-3d;
  transition: transform 1s;
}

.item {
  display: block;
  position: absolute;
  background: #000;
  width: 250px;
  height: 200px;
  line-height: 200px;
  font-size: 5em;
  text-align: center;
  color: #FFF;
  opacity: 0.95;
  border-radius: 10px;
}

.a {
  transform: rotateY(0deg) translateZ(250px);
  background: #ed1c24;
}
.b {
  transform: rotateY(60deg) translateZ(250px);
  background: #0072bc;
}
.c {
  transform: rotateY(120deg) translateZ(250px);
  background: #39b54a;
}
.d {
  transform: rotateY(180deg) translateZ(250px);
  background: #f26522;
}
.e {
  transform: rotateY(240deg) translateZ(250px);
  background: #630460;
} 
.f {
  transform: rotateY(300deg) translateZ(250px);
  background: #8c6239;
}

.next, .prev {
  color: #444;
  position: absolute;
  top: 100px;
  padding: 1em 2em;
  cursor: pointer;
  background: #CCC;
  border-radius: 5px;
  border-top: 1px solid #FFF;
  box-shadow: 0 5px 0 #999;
  transition: box-shadow 0.1s, top 0.1s;
}
.next:hover, .prev:hover { color: #000; }
.next:active, .prev:active {
  top: 104px;
  box-shadow: 0 1px 0 #999;
}
.next { right: 5em; }
.prev { left: 5em; }

<div class="container">
  <div class="carousel">
    <div class="item a">A</div>
    <div class="item b">B</div>
    <div class="item c">C</div>
    <div class="item d">D</div>
    <div class="item e">E</div>
    <div class="item f">F</div>
  </div>
</div>
<!--<div class="next">Next</div>
<div class="prev">Prev</div>-->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

Learn the steps to create a 3D carousel that spins on its own without the need for manual clicks and pauses once the

Answer №1

Answer №2

Similar questions

What's preventing it from being cached?

Showcasing a single item per row in carousels on small and medium-sized devices

"Socket io Simplified: Embracing the Power of Drag

Using Leaflet to beautify categorical json information

What is the best way to automatically remove a Firebase database entry when a user has been inactive for a period of time, without logging out but simply not accessing the page for an extended duration?

Every time I reload the page, a new row is added to the database

What is the method to retrieve the total number of days in a moment-jalaali using NodeJS?

Keeping the header in place: fixed positioning

Deactivate the button for each package based on a specific PHP value

Using regular expressions to eliminate text located outside of the tags within a string

Sending data using formData across multiple levels of a model in Angular

Patience is key as you wait for the observable to finish

Developing a fresh instance in JavaScript

A quick guide on automatically checking checkboxes when the user's input in the "wall_amount" field goes over 3

What technique is used in this CSS code to give each line of text a unique horizontal color gradient?

Exploring the capabilities of the innovative Node's EventTarget class alongside ES6 modules

Image container unable to resize to fit within a CSS grid cell

Errors caused by Typescript transpilation only manifest on the production server

Is there a way to navigate to the home page using a PNG icon without refreshing the page when clicked on, while also utilizing NavLink with a route of '/'?

Obtaining the URL of the Parent Page Using Javascript