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

Using Angular to bind the ngModel to a variable's object property

What is the best way to sort a combination of numbers and text strings?

Execute Jquery ajax only on the initial invocation

Which Web Browsers Support Canvas and HTML5?

The positioning of the <thead> element does not seem to be functioning properly

Using Javascript to organize an array of objects based on a specific condition

Use regular expressions to locate all closing HTML tags and all opening HTML tags individually

Ways to create space around Navbar MUI for a more balanced design

The battle of line-height versus padding for achieving vertical centering with one-lined text

Highlight and trim lengthy text using React

Navigating AngularJS with multiple external files and folders

Transforming the jQuery tooltip to be shown in a column layout

The requested Javascript function could not be found

How to reference an object from an external file in TypeScript using Ionic 2 and Angular 2

Get the JSON file from Firebase storage

Left-aligned arrow for Material UI select dropdown

The task of mapping an array of objects with nested values using JavaScript is proving to

The external hyperlink is not functional in Firefox and Chrome browsers, but it operates properly in Internet Explorer 9

Error message: The call stack size has surpassed the limit, resulting in a RangeError. This issue is

What is the most effective method for preserving RichText (WYSIWYG output)?