Automation Fever

In the ever-evolving landscape of web development, JavaScript emerges as a potent force, enabling developers to breathe life into static web pages. One of the mesmerizing feats achieved with JavaScript is the creation of dynamic sliders, which seamlessly transition between content, captivating the audience with its fluid motion. In this article, we unravel the enchanting JavaScript code behind crafting such sliders, delving into its intricacies and unveiling its secrets.

The Power of JavaScript: Navigating Slides with Grace

At the heart of every slider lies a set of JavaScript functions orchestrating the elegant transition between slides. Let’s embark on a journey through the code that brings this magic to life:

 

document.addEventListener(‘DOMContentLoaded’, function () {
const prevButton = document.getElementById(‘prevButton’);
const nextButton = document.getElementById(‘nextButton’);
const sliderRadios = document.querySelectorAll(‘input[name=”slider”]’);
let currentIndex = 2;

// Function to switch to the next radio button
function switchToNextRadio() {
sliderRadios[currentIndex].checked = false;
currentIndex = (currentIndex + 1) % sliderRadios.length;
sliderRadios[currentIndex].checked = true;
}

// Function to switch to the previous radio button
function switchToPrevRadio() {
sliderRadios[currentIndex].checked = false;
currentIndex = (currentIndex – 1 + sliderRadios.length) % sliderRadios.length;
sliderRadios[currentIndex].checked = true;
}

// Attach click event listeners to the “prev” and “next” buttons
prevButton.addEventListener(‘click’, switchToPrevRadio);
nextButton.addEventListener(‘click’, switchToNextRadio);
});

Decoding the Script: An Insightful Analysis

  1. Event Listener Initialization: The script begins by adding an event listener for the DOMContentLoaded event. This ensures that the JavaScript code executes only after the HTML content has been fully loaded, preventing any premature interactions.

  2. Accessing DOM Elements: The next step involves accessing various DOM elements crucial for slider navigation, such as the previous and next buttons (prevButton and nextButton) and the radio buttons representing each slide (sliderRadios).

  3. Navigating Between Slides: Two functions, switchToNextRadio() and switchToPrevRadio(), handle the logic for transitioning between slides. These functions manipulate the checked property of the radio buttons to activate the next or previous slide, creating a seamless transition effect.

  4. Event Listener Attachment: Finally, event listeners are attached to the previous and next buttons, triggering the respective functions (switchToNextRadio() and switchToPrevRadio()) upon click events.

Embracing the Artistry of JavaScript

In essence, the JavaScript code orchestrating dynamic sliders embodies the artistry of web development, seamlessly blending functionality with elegance. By harnessing the power of JavaScript, developers can craft captivating user experiences that leave a lasting impression on audiences. So, let your creativity soar, and immerse yourself in the enchanting world of dynamic sliders powered by JavaScript!

 

<script src=”https://kit.fontawesome.com/yourcode.js” crossorigin=”anonymous”></script>

<div id=”slider”>
<input type=”radio” name=”slider” id=”s1″>
<input type=”radio” name=”slider” id=”s2″>
<input type=”radio” name=”slider” id=”s3″ checked>
<input type=”radio” name=”slider” id=”s4″>
<input type=”radio” name=”slider” id=”s5″>


<label for=”s1″ id=”slide1″>
<img src=”https://picsum.photos/id/234/200/300″ alt=”” class=”ico” style=”width: 80px; height: 80px; border-radius: 50px; display: block; margin: 0 auto;”>
<p class=”titlesliderc1″>Lorem Ipsum</p>
<p class=”titlesliderc2″>Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit</p>
</label>


<label for=”s2″ id=”slide2″>
<img src=”https://picsum.photos/id/237/200/300″ alt=”” style=”width: 80px; height: 80px; border-radius: 50px; display: block; margin: 0 auto;”><p class=”titlesliderc1″>Lorem Ipsum</p>
<p class=”titlesliderc2″>Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit</p></label>

<label for=”s3″ id=”slide3″>
<img src=”https://picsum.photos/id/231/200/300″ alt=”” style=”width: 80px; height: 80px; border-radius: 50px; display: block; margin: 0 auto;”>
<p class=”titlesliderc1″>Lorem Ipsum</p>
<p class=”titlesliderc2″>Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit</p></label>

<label for=”s4″ id=”slide4″>
<img src=”https://picsum.photos/id/233/200/300″ alt=”” style=”width: 80px; height: 80px; border-radius: 50px; display: block; margin: 0 auto;”><p class=”titlesliderc1″>Lorem Ipsum</p>
<p class=”titlesliderc2″>Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit</p></label>

<label for=”s5″ id=”slide5″><img src=”https://picsum.photos/id/232/200/300″ alt=”” style=”width: 80px; height: 80px; border-radius: 50px; display: block; margin: 0 auto;”>
<p class=”titlesliderc1″>Lorem Ipsum</p>
<p class=”titlesliderc2″>Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit</p>
</label>

</div>

<!– Add the following HTML for navigation buttons with icons –>
<div class=”npbtns”>
<button id=”prevButton” class=”nav-button”><i class=”fas fa-arrow-left”></i></button>
<button id=”nextButton” class=”nav-button”><i class=”fas fa-arrow-right”></i></button>
</div>

<script>
document.addEventListener(‘DOMContentLoaded’, function () {
const prevButton = document.getElementById(‘prevButton’);
const nextButton = document.getElementById(‘nextButton’);
const sliderRadios = document.querySelectorAll(‘input[name=”slider”]’);
let currentIndex = 2;

// Function to switch to the next radio button
function switchToNextRadio() {
sliderRadios[currentIndex].checked = false;
currentIndex = (currentIndex + 1) % sliderRadios.length;
sliderRadios[currentIndex].checked = true;
}

// Function to switch to the previous radio button
function switchToPrevRadio() {
sliderRadios[currentIndex].checked = false;
currentIndex = (currentIndex – 1 + sliderRadios.length) % sliderRadios.length;
sliderRadios[currentIndex].checked = true;
}

// Attach click event listeners to the “prev” and “next” buttons
prevButton.addEventListener(‘click’, switchToPrevRadio);
nextButton.addEventListener(‘click’, switchToNextRadio);
});
</script>


<style>

@media only screen and (min-width: 481px) and (max-width:767px) {

#slider label {
margin: auto;
width: 300px !important;
height: auto;
border-radius: 4px;
position: absolute;
padding: 50px 15px !important;
text-align: center !important;
cursor: pointer;
transition: transform 0.7s ease;
border-radius: 10px;
}
.titlesliderc1 {
font-family: ‘Poppins’, sans-serif;
font-size: 26px;
font-weight: 600;
line-height: 36px;
letter-spacing: 0.01em;
text-align: center;
padding-top: 10px;
text-align: center !important;
}

#slider {
height: 350px !important
position: relative;
perspective: 1000px;
transform-style: preserve-3d;
}
}

 


@media only screen and (min-width: 360px) and (max-width:480px) {

#slider label {
margin: auto;
width: 90% !important;
height: auto;
border-radius: 4px;
position: absolute;
padding: 50px 15px !important;
left: 0;
right: 0;
cursor: pointer;
transition: transform 0.7s ease;
border-radius: 10px;
}
.titlesliderc1 {
font-family: ‘Poppins’, sans-serif;
font-size: 26px;
font-weight: 600;
line-height: 36px;
letter-spacing: 0.01em;
text-align: center !important;
padding-top: 10px;
}

#slider {
height: 350px !important
position: relative;
perspective: 1000px;
transform-style: preserve-3d;
}
}
.titlesliderc1
{
// Cost-Efficient
color: #1A1A1A;
font-size: 24px;
font-family: Poppins;
font-weight: 600;
letter-spacing: 0.24px;
word-wrap: break-word
text-align: center !important;
padding-top: 10px;
}
.npbtns {
text-align: center;
padding-top: 0px;
}
/* Add CSS styles for the navigation buttons container */
.button-container {
text-align: center;
}

/* Update the CSS styles for the navigation buttons */
.nav-button {
background: transparent;
border: none;
font-size: 24px;
color: #000; /* Change the color to your preference */
cursor: pointer;
margin: 0 10px; /* Adjust the margin to control the spacing between buttons */
}

.nav-button:focus {
outline: none;
}

.nav-button:hover {
color: #FF5733; /* Change the hover color to your preference */
}


.titlesliderc2 {
font-family: ‘Poppins’, sans-serif;
font-size: 14px;
font-weight: 400;
line-height: 16px;
letter-spacing: 0.01em;
text-align: center;
}

[type=radio] {
display: none;
}

#slider {
height: 350px;
position: relative;
perspective: 1000px;
transform-style: preserve-3d;
}

#slider label {
margin: auto;
width: 340px;
height: auto;
border-radius: 4px;
position: absolute;
padding: 30px;
left: 0; right: 0;
cursor: pointer;
transition: transform 0.7s ease;
border-radius: 10px;
text-align: center;
}

#s1:checked ~ #slide4, #s2:checked ~ #slide5,
#s3:checked ~ #slide1, #s4:checked ~ #slide2,
#s5:checked ~ #slide3 {
margin-top: 0%;
margin-right: 58%;

box-shadow: 0 1px 4px 0 rgba(0,0,0,.37);
transform: translate3d(-150%,0,-200px);
}

#s1:checked ~ #slide5, #s2:checked ~ #slide1,
#s3:checked ~ #slide2, #s4:checked ~ #slide3,
#s5:checked ~ #slide4 {
margin-top: -0%;
margin-right: 45%;
box-shadow: 0 6px 10px 0 rgba(0,0,0,.3), 0 2px 2px 0 rgba(0,0,0,.2);
transform: translate3d(-90%,0,-100px);
}

#s1:checked ~ #slide1, #s2:checked ~ #slide2,
#s3:checked ~ #slide3, #s4:checked ~ #slide4,
#s5:checked ~ #slide5 {

box-shadow: 0 13px 25px 0 rgba(0,0,0,.3), 0 11px 7px 0 rgba(0,0,0,.19);
transform: translate3d(0,0,0);
}

#s1:checked ~ #slide2, #s2:checked ~ #slide3,
#s3:checked ~ #slide4, #s4:checked ~ #slide5,
#s5:checked ~ #slide1 {
margin-top: 0%;
margin-left: 45%;
box-shadow: 0 6px 10px 0 rgba(0,0,0,.3), 0 2px 2px 0 rgba(0,0,0,.2);
transform: translate3d(90%,0,-100px);
}

#s1:checked ~ #slide3, #s2:checked ~ #slide4,
#s3:checked ~ #slide5, #s4:checked ~ #slide1,
#s5:checked ~ #slide2 {
margin-top: 0%;
margin-left: 58%;
box-shadow: 0 1px 4px 0 rgba(0,0,0,.37);
transform: translate3d(150%,0,-200px);
}

#slide1 { background: #FFFFFF }
#slide2 { background: #FFFFFF }
#slide3 { background: #FFFFFF }
#slide4 { background: #FFFFFF }
#slide5 { background: #FFFFFF }</style>

Scroll to Top