Carousel with Jquery

Question

I am struggling to understand how to implement a simple carousel. I've tried the append()/prepend() functions but can't seem to get it to operate how I would like.

The setup I am using:

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
  <title>First Step Connections - Online Media Marketing</title>
  <link rel="stylesheet" type="text/css" href="style.css">
  <link href="https://fonts.googleapis.com/css2?family=Lato:wght@300;900&display=swap" rel="stylesheet">
</head>


<body>


<div id="testimonial-carousel-container">
  <div id="btn-prev"> < </div>


<div id="testimonial-carousel">


 <div id="testimonial-container">
 <div id="testimonial">
  <div class="speech-bubble">
    <div class="arrow bottom right"></div>
    How was lunch today? 
  </div>
  <img src="../Customer_Testimonial1.jpg"/>
  <span class="author">
 Justin Harris<br/>
 Houston, TX
</span>
 </div>

 <div id="testimonial">
  <div class="speech-bubble">
    <div class="arrow bottom right"></div>
    Football is the best sport! 
  </div>
  <img src="../Customer_Testimonial1.jpg"/>
  <span class="author">
 Justin Harris<br/>
 Houston, TX
</span>
 </div>


 <div id="testimonial">
  <div class="speech-bubble">
    <div class="arrow bottom right"></div>
    Meeting at 12pm. 
  </div>
  <img src="../Customer_Testimonial1.jpg"/>
  <span class="author">
 Justin Harris<br/>
 Houston, TX
</span>
 </div>

 <div id="testimonial">
  <div class="speech-bubble">
    <div class="arrow bottom right"></div>
    The weather outside is gorgeous.
  </div>
  <img src="../Customer_Testimonial1.jpg"/>
 <span class="author">
 Justin Harris<br/>
 Houston, TX
</span>
 </div>

 <div id="testimonial">
  <div class="speech-bubble">
    <div class="arrow bottom right"></div>
    Susan can you call Jim?
  </div>
  <img src="../Customer_Testimonial1.jpg"/>
  <span class="author">
 Justin Harris</br>
 Houston, TX
</span>
</div>

</div>
</div>
<div id="btn-next"> > </div>
</div>
</body>
</html>

Basically I have a carousel container, and within the carousel container I have a testimonial container with x amount of testimonial divs.

The css seems okay in that I hid the overflow of carousel container, and removed white-space wrapping on the testimonial container. So everything appears fine.. I just need help with the logic of how I would endlessly be able to scroll through the x amount of divs.

So when I get to the last testimonial it continues fluidly to the first.

Here is my css incase you need it:

:root {
  --main-red-color: #e11a2c;
  --main-blue-color: #013e7b;
  --main-green-color: #8dc63f;

}

* {
  color:var(--main-blue-color);
  box-sizing:border-box;
  font-family:"Lato", sans-serif;
}

#testimonial-carousel-container {
  width:70%;
  margin: auto;
  position:relative;
}

#testimonial-carousel {
  margin: auto;
  background-color:var(--main-blue-color);
  position:relative;
  overflow:hidden;
}

#testimonial-container {
  white-space:nowrap;
  width:100%;
  position:relative;
}

.speech-bubble {
  border-radius:5px;
  background-color:var(--main-green-color);
  width:auto;
  display:inline-block;
  padding:20px;
  text-align:center;
  position:relative;
}

.speech-bubble .arrow {
  border-style: solid;
  position:absolute;
}

.bottom {
  border-color: var(--main-green-color) transparent transparent transparent;
  border-width:8px 8px 0 8px;
  bottom:-8px;
}

#testimonial {
  padding:10px 5px 5px 5px;
  height:200px;
  background-color:var(--main-red-color);
  position:relative;
  display:inline-grid;
  opacity:.4;
}

#testimonial img {
  width:40px;
  height:40px;
  border-radius:50%;
  margin-top:13px;
}

#testimonial span {
  color:#fff;
  font-weight:900;
}

#btn-prev, #btn-next {
  position:absolute;
  background-color:var(--main-red-color);
  color:#fff;
  height:40px;
  width:40px;
  z-index:5;
  border:3px solid #fff;
  text-align:center;
  line-height:40px;
  font-weight:900;
  margin-top:-20px;
}

#btn-prev:hover, #btn-next:hover {
  background-color:var(--main-blue-color);
}

#btn-prev {
  top:50%;
  left:-40px;
}

#btn-next {
  top:50%;
  right:-40px;
}

As for the Jquery scripting I am drawing blanks. If you could provide some help as to the logic for completing this I would greatly appreciate it. Is append() prepend() the only way to go?

You can view the demo at: http://firststepconnections.com/carousel/

Use left css property for inner carousel and put transition on this in css for smooth movement. Clone your items to the left and right ends of your items, so that there will be 3 copies. Show exactly middle part. If you have moved to first or third set of items, jump back to middle one. Disable css transition for this moment. You can't use multiple same id-s. — Rauli Rajande, Jun 11 '20 at 23:38
Thanks so much Rauli. You gave me what I was looking for. I do have a question about append and prepend but I will ask it in another thread. Thank you again for your help! — Justin Harris, Jun 11 '20 at 23:58
Does this anwer your question regarding append and prepend : https://stackoverflow.com/questions/14846506/append-prepend-after-and-before — Always Helping, Jun 12 '20 at 00:44
I finally managed to get append to add multiple elements by using a function inside and looping through the items. Works. now I am just working to write the functions to animate the testimonial-container. I believe I understand you. Thanks :) — Justin Harris, Jun 12 '20 at 02:38

Carousel with Jquery

0 Answers0