changing the elements' classes by using a carousel

Question

changing the elements' classes by using a carousel

Having trouble with a custom carousel and unable to use the standard Bootstrap carousel.

This is how my code is structured:

Images:

 <img src="1.img"/>
 <img src="2.img"/>
 <img src="3.img"/>

Prev / Next buttons:

 <div class="left"></div> left button
 <div class="right"></div> right button

These buttons navigate through elements in the "ol" table.

Ol Table:

 <ol>
      <li>Circle 1</li>
      <li class="active">Circle 2</li>
      <li>Circle 3</li>
 </ol>

Clicking on a button loads data corresponding to that element, marking it as active.

The issue lies with the Prev / Next buttons operation. Given an HTML "ol" with three elements, I need them to cycle properly when clicked.

Starting from the second element with an active class, I aim to use jQuery prev() and next() functions in a for loop to ensure correct navigation behavior.

Current logic on click of "next" (and vice versa with "prev") buttons:

 $("li.active").next().addClass("active");
 $("li.active").prev().removeClass("active");

Encountering two problems: 1) Selection issues between elements when clicking to navigate forward. 2) Incorrect element selection when navigating backwards. A for loop seems necessary to address these challenges. Can anyone assist with this? Thank you.

javascript jquery html css

Answer 1

Answer №1

Below is the code snippet for the next button functionality:

$(".next").on("click", function(){
  moveToNext();
});//.next click

function moveToNext()
{
  var curIndex = $("ol li.active").index();
  var totalSlides = $("ol li").length;
  var nextIndex = curIndex + 1;

  if( nextIndex >= totalSlides )
  {
    nextIndex = 0;
  }//if

  $("ol li.active").removeClass("active");
  $("ol li").eq( nextIndex ).addClass("active").trigger("click");

}//moveToNext();

You can use a similar approach to implement functionality for the previous button as well.

Answer 2

Below is the code snippet for the next button functionality:

$(".next").on("click", function(){
  moveToNext();
});//.next click

function moveToNext()
{
  var curIndex = $("ol li.active").index();
  var totalSlides = $("ol li").length;
  var nextIndex = curIndex + 1;

  if( nextIndex >= totalSlides )
  {
    nextIndex = 0;
  }//if

  $("ol li.active").removeClass("active");
  $("ol li").eq( nextIndex ).addClass("active").trigger("click");

}//moveToNext();

You can use a similar approach to implement functionality for the previous button as well.

Answer 3

Answer №2

A Simple Vanilla JavaScript Approach with Previous and Next Functionality

var nextButton = document.querySelector('#next');
var previousButton = document.querySelector('#previous');
var imageItems = document.querySelectorAll('.slider img');
var circles = document.querySelectorAll('.slider ol li');
var counter = 0;

if (nextButton) {
  nextButton.addEventListener('click', displayNextImage, false);
  previousButton.addEventListener('click', displayPreviousImage, false);
}

for (var i = 0; i < circles.length; i++) {
  var circleElement = circles[i];
  circleElement.addEventListener('click', function() {

    for (var j = 0; j < imageItems.length; j++) {
      if (imageItems[j].classList.contains('active')) {
        imageItems[j].classList.remove('active');
      }
      if (circles[j].classList.contains('active')) {
        circles[j].classList.remove('active');
      }
    }

    imageItems[this.dataset.count].classList.add('active');
    circles[this.dataset.count].classList.add('active');
    counter = this.dataset.count;
  });
}

function displayNextImage() {
  for (var i = 0; i < imageItems.length; i++) {
    if (imageItems[i].classList.contains('active')) {
      imageItems[i].classList.remove('active');
    }
    if (circles[i].classList.contains('active')) {
      circles[i].classList.remove('active');
    }
  }
  if (counter === imageItems.length - 1) {
    counter = 0;
    imageItems[counter].classList.add('active');
    circles[counter].classList.add('active');
  } else {
    counter++;
    imageItems[counter].classList.add('active');
    circles[counter].classList.add('active');
  }

}

function displayPreviousImage() {
  for (var i = 0; i < imageItems.length; i++) {
    if (imageItems[i].classList.contains('active')) {
      imageItems[i].classList.remove('active');
    }
    if (circles[i].classList.contains('active')) {
      circles[i].classList.remove('active');
    }
  }
  if (counter === 0) {
    counter = imageItems.length - 1;
    imageItems[counter].classList.add('active');
    circles[counter].classList.add('active');
  } else {
    counter--;
    imageItems[counter].classList.add('active');
    circles[counter].classList.add('active');
  }

}

img {
  width: 120px;
  height: 120px;
}
img.active {
  background: #DDD;
}
li.active {
  color: #000;
  background: #ddd;
}
ol li {
  background: #fff;
  border: 1px solid #DDD;
  cursor: pointer;
  padding: 3px;
  display: inline-block;
}

<div class="slider">

  <img class='active' src="" />
  <img src="" />
  <img src="" />

  <ol>
    <li data-count='0' class="active">Circle 1</li>
    <li data-count='1'>Circle 2</li>
    <li data-count='2'>Circle 3</li>
  </ol>
</div>

<button id="previous">Previous</button>

<button id="next">Next</button>

Answer 4

A Simple Vanilla JavaScript Approach with Previous and Next Functionality

var nextButton = document.querySelector('#next');
var previousButton = document.querySelector('#previous');
var imageItems = document.querySelectorAll('.slider img');
var circles = document.querySelectorAll('.slider ol li');
var counter = 0;

if (nextButton) {
  nextButton.addEventListener('click', displayNextImage, false);
  previousButton.addEventListener('click', displayPreviousImage, false);
}

for (var i = 0; i < circles.length; i++) {
  var circleElement = circles[i];
  circleElement.addEventListener('click', function() {

    for (var j = 0; j < imageItems.length; j++) {
      if (imageItems[j].classList.contains('active')) {
        imageItems[j].classList.remove('active');
      }
      if (circles[j].classList.contains('active')) {
        circles[j].classList.remove('active');
      }
    }

    imageItems[this.dataset.count].classList.add('active');
    circles[this.dataset.count].classList.add('active');
    counter = this.dataset.count;
  });
}

function displayNextImage() {
  for (var i = 0; i < imageItems.length; i++) {
    if (imageItems[i].classList.contains('active')) {
      imageItems[i].classList.remove('active');
    }
    if (circles[i].classList.contains('active')) {
      circles[i].classList.remove('active');
    }
  }
  if (counter === imageItems.length - 1) {
    counter = 0;
    imageItems[counter].classList.add('active');
    circles[counter].classList.add('active');
  } else {
    counter++;
    imageItems[counter].classList.add('active');
    circles[counter].classList.add('active');
  }

}

function displayPreviousImage() {
  for (var i = 0; i < imageItems.length; i++) {
    if (imageItems[i].classList.contains('active')) {
      imageItems[i].classList.remove('active');
    }
    if (circles[i].classList.contains('active')) {
      circles[i].classList.remove('active');
    }
  }
  if (counter === 0) {
    counter = imageItems.length - 1;
    imageItems[counter].classList.add('active');
    circles[counter].classList.add('active');
  } else {
    counter--;
    imageItems[counter].classList.add('active');
    circles[counter].classList.add('active');
  }

}

img {
  width: 120px;
  height: 120px;
}
img.active {
  background: #DDD;
}
li.active {
  color: #000;
  background: #ddd;
}
ol li {
  background: #fff;
  border: 1px solid #DDD;
  cursor: pointer;
  padding: 3px;
  display: inline-block;
}

<div class="slider">

  <img class='active' src="" />
  <img src="" />
  <img src="" />

  <ol>
    <li data-count='0' class="active">Circle 1</li>
    <li data-count='1'>Circle 2</li>
    <li data-count='2'>Circle 3</li>
  </ol>
</div>

<button id="previous">Previous</button>

<button id="next">Next</button>

changing the elements' classes by using a carousel

Answer №1

Answer №2

Similar questions

Angular Bootstrap: How to Resolve the Error "Function $(...).collapse() is Undefined"

What is the reason behind genNewColor function's malfunction?

Experiencing odd behavior with my Dash App when using CSS grid on it

Encountering a npm script error while running on a Windows operating

Limit selection choices in select element

Ways to showcase tooltip text for an unordered list item?

Angular and JavaScript: Today is Monday and the date is exactly one week old

A guide to using Angular to emphasize text based on specific conditions met

improve your AJAX implementation in Django

Looking to center the numbers in my ordered list within a border box - any tips on how to achieve this?

Placing JavaScript at the bottom of the page, sourced from a Partial Page

When you click, a new webpage opens within my website, similar to the feature on Facebook

RxJS: Transforming an Observable array prior to subscribing

Is there a way to automatically remove files from the "dist" directory when deleting the prototype from the "src" folder?

Using Python to interact with website dropdown menus without relying on Selenium

Protractor: Unable to reach variables within closure set in the parent function

The system is unable to retrieve the value of the property which is set as null

React Bootstrap encountered rendering issues

Null value arising due to AJAX's asynchronous nature

Tips for creating a concise summary of written content