JavaScript Slider for Color Selection

Question

JavaScript Slider for Color Selection

In my slider, I have added a .images class along with buttons for previous and next.

To set the colors, I have used JavaScript to define an array like this:

let colors = ['red', 'green',];

Currently, clicking the next-button displays the red color. This is done using the following function:

function nextSlide() {
  container.style.backgroundColor = colors[0];

I am looking to achieve a functionality where clicking the next button always displays the next color from the defined array. On the other hand, when the previous-button is clicked, the slider should show the previous color in the array.

You can see the complete source code below:

const nextBtn = document.querySelector('.nextBtn');
const prevBtn = document.querySelector('.prevBtn');
const container = document.querySelector('.images');

let colors = ['red', 'blue',];

nextBtn.addEventListener('click', nextSlide);
prevBtn.addEventListener('click', prevSlide);

function nextSlide() {
  container.style.backgroundColor = colors[0];
}

function prevSlide() {
  container.style.backgroundColor = colors[1];
}

body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: lightblue;
}
.images {
  background-color: #4047c9;
  flex: 0 0 80%;
  min-height: 70vh;
  border-radius: 10px;
  position: relative;
}
.btn {
  display: inline-block;
  background: white;
  color: black;
  padding: 10px;
  border: none;
  cursor: pointer;
}
.prevBtn {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}

.nextBtn {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translate(50%, -50%);
  -webkit-transform: translate(50%, -50%);
  -moz-transform: translate(50%, -50%);
  -ms-transform: translate(50%, -50%);
}

.btn:active {
  background-color: grey;
  color: white;
}

.btn:hover {
  background-color: grey;
  color: white;
}

<div class="images">
  <button type="button" class="btn prevBtn">Prev Button</button>
  <button type="button" class="btn nextBtn">Next Button</button>
</div>

javascript html css slider addeventlistener

Answer 1

Answer №1

To achieve a looping effect where clicking on the last slide takes you to the first slide, and left-clicking on the first slide takes you to the last slide, you can utilize the modulus trick.

slideslength + currentslidenumber + directions %(modulus) slidelength

Here is an illustration of this concept:

const nextBtn = document.querySelector('.nextBtn');
const prevBtn = document.querySelector('.prevBtn');
const container = document.querySelector('.images');

let colors = ['red', 'green', 'blue',];
let currentSlide = 0;

function updateSlide(direction) {
  currentSlide = 
    (colors.length + currentSlide + direction)
    % colors.length;
  container.style.backgroundColor = colors[currentSlide];
}

updateSlide(0);

nextBtn.addEventListener('click', nextSlide);
prevBtn.addEventListener('click', prevSlide);

function nextSlide() {
  updateSlide(+1);
}

function prevSlide() {
  updateSlide(-1);
}

body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: lightblue;
}

.images {
  background-color: #4047c9;
  flex: 0 0 80%;
  min-height: 70vh;
  border-radius: 10px;
  position: relative;
}

.btn {
  display: inline-block;
  background: white;
  color: black;
  padding: 10px;
  border: none;
  cursor: pointer;
}

.prevBtn {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(-50%, -50%);
}

.nextBtn {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translate(50%, -50%);
}

.btn:active {
  background-color: grey;
  color: white;
}

.btn:hover {
  background-color: grey;
  color: white;
}

<div class="images">
    <button type="button" class="btn prevBtn">Prev Btn</button>
    <button type="button" class="btn nextBtn">Next Btn</button>
  </div>

Answer 2

To achieve a looping effect where clicking on the last slide takes you to the first slide, and left-clicking on the first slide takes you to the last slide, you can utilize the modulus trick.

slideslength + currentslidenumber + directions %(modulus) slidelength

Here is an illustration of this concept:

const nextBtn = document.querySelector('.nextBtn');
const prevBtn = document.querySelector('.prevBtn');
const container = document.querySelector('.images');

let colors = ['red', 'green', 'blue',];
let currentSlide = 0;

function updateSlide(direction) {
  currentSlide = 
    (colors.length + currentSlide + direction)
    % colors.length;
  container.style.backgroundColor = colors[currentSlide];
}

updateSlide(0);

nextBtn.addEventListener('click', nextSlide);
prevBtn.addEventListener('click', prevSlide);

function nextSlide() {
  updateSlide(+1);
}

function prevSlide() {
  updateSlide(-1);
}

body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: lightblue;
}

.images {
  background-color: #4047c9;
  flex: 0 0 80%;
  min-height: 70vh;
  border-radius: 10px;
  position: relative;
}

.btn {
  display: inline-block;
  background: white;
  color: black;
  padding: 10px;
  border: none;
  cursor: pointer;
}

.prevBtn {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(-50%, -50%);
}

.nextBtn {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translate(50%, -50%);
}

.btn:active {
  background-color: grey;
  color: white;
}

.btn:hover {
  background-color: grey;
  color: white;
}

<div class="images">
    <button type="button" class="btn prevBtn">Prev Btn</button>
    <button type="button" class="btn nextBtn">Next Btn</button>
  </div>

Answer 3

Answer №2

const nextButton = document.querySelector('.nextButton');
const previousButton = document.querySelector('.previousButton');
const imageContainer = document.querySelector('.imageGallery');

let imageColors = ['red', 'blue',];

let currentIndex = 0;

nextButton.addEventListener('click', showNextSlide);
previousButton.addEventListener('click', showPreviousSlide);

function showNextSlide() {
  imageContainer.style.backgroundColor = imageColors[currentIndex];
  if(currentIndex <= imageColors.length){
    currentIndex++;
  }else{
    currentIndex = 0;
  }
}

function showPreviousSlide() {
  imageContainer.style.backgroundColor = imageColors[currentIndex];
  if(currentIndex <= imageColors.length){
    currentIndex--;
  }else{
    currentIndex = 0;
  }
}

<div class="imageGallery">
    <button type="button" class="btn prevBtn">Show Previous Slide</button>
    <button type="button" class="btn nextBtn">Show Next Slide</button>
  </div>

Answer 4

const nextButton = document.querySelector('.nextButton');
const previousButton = document.querySelector('.previousButton');
const imageContainer = document.querySelector('.imageGallery');

let imageColors = ['red', 'blue',];

let currentIndex = 0;

nextButton.addEventListener('click', showNextSlide);
previousButton.addEventListener('click', showPreviousSlide);

function showNextSlide() {
  imageContainer.style.backgroundColor = imageColors[currentIndex];
  if(currentIndex <= imageColors.length){
    currentIndex++;
  }else{
    currentIndex = 0;
  }
}

function showPreviousSlide() {
  imageContainer.style.backgroundColor = imageColors[currentIndex];
  if(currentIndex <= imageColors.length){
    currentIndex--;
  }else{
    currentIndex = 0;
  }
}

<div class="imageGallery">
    <button type="button" class="btn prevBtn">Show Previous Slide</button>
    <button type="button" class="btn nextBtn">Show Next Slide</button>
  </div>

Answer 5

Answer №3

To create a counter that increments or decrements on each function call, ensuring it stays within the bounds of the array length and uses the counter as an index to assign colors from a color array:

const nextBtn = document.querySelector('.nextBtn');
const prevBtn = document.querySelector('.prevBtn');
const container = document.querySelector('.images');

let colors = ['purple', 'orange', 'pink', 'teal'];

nextBtn.addEventListener('click', nextSlide);
prevBtn.addEventListener('click', prevSlide);
var i=0;

function nextSlide() {
if(i>=colors.length-1)
i=0;
if(i<0)
i=colors.length-1;
  container.style.backgroundColor = colors[i++];

}

function prevSlide() {
if(i>=colors.length-1)
i=0;
if(i<0)
i=colors.length-1;
  container.style.backgroundColor = colors[i--];
}

body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: lightcoral;
}

.images {
  background-color: #22a7f0;
  flex: 0 0 80%;
  min-height: 70vh;
  border-radius: 10px;
  position: relative;
}

.btn {
  display: inline-block;
  background: white;
  color: black;
  padding: 10px;
  border: none;
  cursor: pointer;
}

.prevBtn {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(-50%, -50%);
}

.nextBtn {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translate(50%, -50%);
}

.btn:active {
  background-color: purple;
  color: white;
}

.btn:hover {
  background-color: purple;
  color: white;
}

<div class="images">
    <button type="button" class="btn prevBtn">Previous</button>
    <button type="button" class="btn nextBtn">Next</button>
  </div>

Answer 6

To create a counter that increments or decrements on each function call, ensuring it stays within the bounds of the array length and uses the counter as an index to assign colors from a color array:

const nextBtn = document.querySelector('.nextBtn');
const prevBtn = document.querySelector('.prevBtn');
const container = document.querySelector('.images');

let colors = ['purple', 'orange', 'pink', 'teal'];

nextBtn.addEventListener('click', nextSlide);
prevBtn.addEventListener('click', prevSlide);
var i=0;

function nextSlide() {
if(i>=colors.length-1)
i=0;
if(i<0)
i=colors.length-1;
  container.style.backgroundColor = colors[i++];

}

function prevSlide() {
if(i>=colors.length-1)
i=0;
if(i<0)
i=colors.length-1;
  container.style.backgroundColor = colors[i--];
}

body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: lightcoral;
}

.images {
  background-color: #22a7f0;
  flex: 0 0 80%;
  min-height: 70vh;
  border-radius: 10px;
  position: relative;
}

.btn {
  display: inline-block;
  background: white;
  color: black;
  padding: 10px;
  border: none;
  cursor: pointer;
}

.prevBtn {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(-50%, -50%);
}

.nextBtn {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translate(50%, -50%);
}

.btn:active {
  background-color: purple;
  color: white;
}

.btn:hover {
  background-color: purple;
  color: white;
}

<div class="images">
    <button type="button" class="btn prevBtn">Previous</button>
    <button type="button" class="btn nextBtn">Next</button>
  </div>

Answer 7

Answer №4

Great job! You're almost there, all you need to do is add an index variable to keep track of the current position in your color array:

const nextBtn = document.querySelector('.nextBtn');
const prevBtn = document.querySelector('.prevBtn');
const container = document.querySelector('.images');

let colors = ['red', 'blue', 'yellow', 'green'];
let index = 0;
let length = colors.length;

nextBtn.addEventListener('click', nextSlide);
prevBtn.addEventListener('click', prevSlide);

function changeColor() {
  container.style.backgroundColor = colors[index];
}

function nextSlide() {
 if(index == length - 1){
   index = 0;
 }else{
   index++;
 }
 changeColor();
}

function prevSlide() {
  if(index == 0){
    index = length - 1;
  }else {
    index--;
  }
  changeColor();
}

body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: lightblue;
}

.images {
  background-color: #4047c9;
  flex: 0 0 80%;
  min-height: 70vh;
  border-radius: 10px;
  position: relative;
}

.btn {
  display: inline-block;
  background: white;
  color: black;
  padding: 10px;
  border: none;
  cursor: pointer;
}

.prevBtn {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(-50%, -50%);
}

.nextBtn {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translate(50%, -50%);
}

.btn:active {
  background-color: grey;
  color: white;
}

.btn:hover {
  background-color: grey;
  color: white;
}

<div class="images">
    <button type="button" class="btn prevBtn">Prev Btn</button>
    <button type="button" class="btn nextBtn">Next Btn</button>
  </div>

Answer 8

Great job! You're almost there, all you need to do is add an index variable to keep track of the current position in your color array:

const nextBtn = document.querySelector('.nextBtn');
const prevBtn = document.querySelector('.prevBtn');
const container = document.querySelector('.images');

let colors = ['red', 'blue', 'yellow', 'green'];
let index = 0;
let length = colors.length;

nextBtn.addEventListener('click', nextSlide);
prevBtn.addEventListener('click', prevSlide);

function changeColor() {
  container.style.backgroundColor = colors[index];
}

function nextSlide() {
 if(index == length - 1){
   index = 0;
 }else{
   index++;
 }
 changeColor();
}

function prevSlide() {
  if(index == 0){
    index = length - 1;
  }else {
    index--;
  }
  changeColor();
}

body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: lightblue;
}

.images {
  background-color: #4047c9;
  flex: 0 0 80%;
  min-height: 70vh;
  border-radius: 10px;
  position: relative;
}

.btn {
  display: inline-block;
  background: white;
  color: black;
  padding: 10px;
  border: none;
  cursor: pointer;
}

.prevBtn {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(-50%, -50%);
}

.nextBtn {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translate(50%, -50%);
}

.btn:active {
  background-color: grey;
  color: white;
}

.btn:hover {
  background-color: grey;
  color: white;
}

<div class="images">
    <button type="button" class="btn prevBtn">Prev Btn</button>
    <button type="button" class="btn nextBtn">Next Btn</button>
  </div>

JavaScript Slider for Color Selection

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

After applying sorting, jqGrid displays an empty space below the final row

Jest tests are failing because React is not defined

Angular filter within a nested ng-repeat loop

What could be the reason for the Mongoose findAll function causing a 500 error to occur?

Error: The last line is missing a trailing comma

Efficiently repositioning Kendo Mobile Buttongroup to a new row as needed

How can I customize the variables in Webpack for Sass and Foundation?

Struggling with Angular 8: Attempting to utilize form data for string formatting in a service, but encountering persistent page reloading and failure to reassign variables from form values

Communication between a directive controller and a service via an HTTP call

What is the reason behind Internet Explorer 11 not supporting conditional comments in HTML? Has this feature been dropped?

Personalized Pinterest button to link to a custom URL (Text Link, Image, or Both)

Use JavaScript regex to replace a string only if its length exceeds a certain specified limit

Updating chart.js data seems to be presenting some challenges

a dedicated TypeScript interface for a particular JSON schema

Using an if-else statement within a Vue event listener

Issues with NodeJs Express routes execution

Log into your account by choosing a button using Selenium with Python

Choose2 incorporate on change

Choosing the Offspring: Deliberating on Multiple Children with Identical Names in Selenium

What steps should be taken to transform this Jquery Ajax code into Pure Javascript Fetch?