I want to create a custom jQuery slider totally from scratch

Question

I want to create a custom jQuery slider totally from scratch

Greetings everyone,

I have been tasked with creating a slider using only HTML / jQuery code.

Here is the template:

And here is the HTML code for the template above:

<div id="viewport-container">
    <section id="sliding-container">
        <article id="slide-0" class="slide"><span></span></article>
        <article id="slide-1" class="slide"><span></span></article>
        <article id="slide-2" class="slide"><span></span></article>
        <article id="slide-3" class="displayed-slide"><span></span></article>
    </section>
</div>
<nav id="slider-nav">
    <a href="#slide-0" class="active"></a>
    <a href="#slide-1"></a>
    <a href="#slide-2"></a>
    <a href="#slide-3"></a>
</nav>

The functionality should be such that when button {#slide-0} is clicked, it will display article {ID="slide-0"}; subsequently, selecting another button like {#slide-3} will cause the article with {ID="slide-0"} to fade out and the article with {ID="slide-3"} to fade in. This pattern continues as users switch between buttons, causing articles to fade in and out accordingly.

I have been struggling with this task for about a week now, so I would greatly appreciate any assistance you can offer.

Thank you all very much

javascript jquery html css slider

Answer 1

Answer №1

Here's a guide to get you started. You will require: - http://jquery.com/ - JQuery - http://jqueryui.com/ -JQueryUI

Using these two tools will simplify your work process. Begin by integrating JQuery into your website and then add JQueryUI.

Next, implement something similar to the following in your own JQuery Code:

The HTML:

<div id="slider">
    <div id="firstSlide">
        <img class="active" src="pics/home/1.1.gif"/>
        <img src="pics/home/1.2.gif"/>
        <img src="pics/home/1.3.gif"/>
    </div>
</div>

The CSS:

    #slider
    {
        position: relative;
        height: 180px;
        border-bottom: 3px solid black;
        z-index: 1;
        box-shadow: 0px 0px 10px black;
    }

    #firstSlide
    {
        position: absolute;
        width: 198px;
        height: 100%;
        left: 0%;
        border: 1px solid black;
    }

    #firstSlide img
    {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0px;
        left: 0px;
        z-index: 1;
    }

    #firstSlide img.active
    {
        z-index: 3;
    }

The JQuery:

var howLongEffectLasts = 1000;
var timerInterval = 7000;
var slideDelay = 300;
var slideEffect = 'slide';
var slideDirection = 'up';

var timer = setInterval('DoIt1()', timerInterval);

function DoIt1()
{
    var $active = $('#firstSlide' + ' .' + 'active');
    var $next = ($active.next().length > 0) ? $active.next() : $('#firstSlide' + ' ' + 'img:first');
    $next.css('z-index',2);
    $active.toggle(slideEffect, { direction: slideDirection }, howLongEffectLasts, function() {
        $active.css('z-index',1).show().removeClass('active');
        $next.css('z-index',3).addClass('active');
    });
    setTimeout(function() { DoIt1(); }, slideDelay);
}

Modify the variables in the JQuery code according to your requirements. Also, customize the CSS to suit your needs. Pay attention to the Z-INDEX values as they are crucial for proper functioning of the provided CSS.

Answer 2

Here's a guide to get you started. You will require: - http://jquery.com/ - JQuery - http://jqueryui.com/ -JQueryUI

Using these two tools will simplify your work process. Begin by integrating JQuery into your website and then add JQueryUI.

Next, implement something similar to the following in your own JQuery Code:

The HTML:

<div id="slider">
    <div id="firstSlide">
        <img class="active" src="pics/home/1.1.gif"/>
        <img src="pics/home/1.2.gif"/>
        <img src="pics/home/1.3.gif"/>
    </div>
</div>

The CSS:

    #slider
    {
        position: relative;
        height: 180px;
        border-bottom: 3px solid black;
        z-index: 1;
        box-shadow: 0px 0px 10px black;
    }

    #firstSlide
    {
        position: absolute;
        width: 198px;
        height: 100%;
        left: 0%;
        border: 1px solid black;
    }

    #firstSlide img
    {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0px;
        left: 0px;
        z-index: 1;
    }

    #firstSlide img.active
    {
        z-index: 3;
    }

The JQuery:

var howLongEffectLasts = 1000;
var timerInterval = 7000;
var slideDelay = 300;
var slideEffect = 'slide';
var slideDirection = 'up';

var timer = setInterval('DoIt1()', timerInterval);

function DoIt1()
{
    var $active = $('#firstSlide' + ' .' + 'active');
    var $next = ($active.next().length > 0) ? $active.next() : $('#firstSlide' + ' ' + 'img:first');
    $next.css('z-index',2);
    $active.toggle(slideEffect, { direction: slideDirection }, howLongEffectLasts, function() {
        $active.css('z-index',1).show().removeClass('active');
        $next.css('z-index',3).addClass('active');
    });
    setTimeout(function() { DoIt1(); }, slideDelay);
}

Modify the variables in the JQuery code according to your requirements. Also, customize the CSS to suit your needs. Pay attention to the Z-INDEX values as they are crucial for proper functioning of the provided CSS.

Answer 3

Answer №2

Have you considered using a javascript function within your href attribute to dynamically change the class of your article?

By altering the class of your article, you can control whether it is displayed or not (for example, with classes like slide or displayed-slide).

Is this the approach you are looking for?

Have you experimented with any solutions so far?

Answer 4

Have you considered using a javascript function within your href attribute to dynamically change the class of your article?

By altering the class of your article, you can control whether it is displayed or not (for example, with classes like slide or displayed-slide).

Is this the approach you are looking for?

Have you experimented with any solutions so far?

Answer 5

Answer №3

Finally accomplished it! (exhales)

Below is the CSS styling:

#viewport-container {
height: 250px;
width: 980px;
margin: 0 auto;
overflow: hidden;
}

#sliding-container {
width: 100%;
}

#slide-0 {
background-image: url(/Images/slide_home.jpg);
height: 250px;
width: 980px;
position: absolute;
}

#slide-1 {
background-image: url(/Images/slide_informatica.jpg);
height: 250px;
width: 980px;
position: absolute;
}

#slide-2 {
background-image: url(/Images/slide_musica.jpg);
height: 250px;
width: 980px;
position: absolute;
}

#slide-3 {
background-image: url(/Images/slide_recensioni.jpg);
height: 250px;
width: 980px;
position: absolute;
}

#slider-nav {
text-align: center;
margin: 10px 0 0 0;
}

#slider-nav a {
width: 10px;
height: 10px;
display: inline-block;
background: #ddd;
border-radius: 50%;
}

#slider-nav a.active {
background: #999;
}

This snippet represents the HTML structure:

<head>
<title></title>
<script src="Scripts/jquery-2.0.3.min.js"></script>
<link href="CSS/Slider.css" rel="stylesheet" />

</head>
<body>
<div id="viewport-container">
<section id="sliding-container">
<article id="slide-0" class="displayed" style="display:block;"><span></span></article>
<article id="slide-1" style="display:none"><span></span></article>
<article id="slide-2" style="display:none"><span></span></article>
<article id="slide-3" style="display:none"><span></span></article>
</section>
</div>
<nav id="slider-nav">
<a id="btn-0" href="#slide-0" class="active"></a>
<a id="btn-1" href="#slide-1"></a>
<a id="btn-2" href="#slide-2"></a>
<a id="btn-3" href="#slide-3"></a>
</nav>

The following script controls the functionality:

<script>
$(document).ready(function () {
var $navButtons = $("#slider-nav > a");

$navButtons.click(
function () {
var $selectedButton = $(this);
var rawIdSlideToFadeIn = $selectedButton.attr("href");

$navButtons.removeClass("active");
$selectedButton.addClass("active");

crossFading(rawIdSlideToFadeIn);
});

function crossFading(rawIdSlideToFadeIn) {
var $slideToFadeIn = $(rawIdSlideToFadeIn);                
var $slideToFadeOut = $("article.displayed");
var idSlideToFadeIn = $slideToFadeIn.attr("id");
var idSlideToFadeOut = $slideToFadeOut.attr("id");                

if(idSlideToFadeIn != idSlideToFadeOut)
{
$slideToFadeOut.removeClass("displayed").css("style", "none").fadeOut();
$slideToFadeIn.addClass("displayed").css("style", "block").fadeIn();
}
}
});
</script>

Although there are areas for improvement, the core foundation has been established.

Special gratitude to SushiBalboha for steering me in the right direction.

Thank you sincerely

Answer 6

Finally accomplished it! (exhales)

Below is the CSS styling:

#viewport-container {
height: 250px;
width: 980px;
margin: 0 auto;
overflow: hidden;
}

#sliding-container {
width: 100%;
}

#slide-0 {
background-image: url(/Images/slide_home.jpg);
height: 250px;
width: 980px;
position: absolute;
}

#slide-1 {
background-image: url(/Images/slide_informatica.jpg);
height: 250px;
width: 980px;
position: absolute;
}

#slide-2 {
background-image: url(/Images/slide_musica.jpg);
height: 250px;
width: 980px;
position: absolute;
}

#slide-3 {
background-image: url(/Images/slide_recensioni.jpg);
height: 250px;
width: 980px;
position: absolute;
}

#slider-nav {
text-align: center;
margin: 10px 0 0 0;
}

#slider-nav a {
width: 10px;
height: 10px;
display: inline-block;
background: #ddd;
border-radius: 50%;
}

#slider-nav a.active {
background: #999;
}

This snippet represents the HTML structure:

<head>
<title></title>
<script src="Scripts/jquery-2.0.3.min.js"></script>
<link href="CSS/Slider.css" rel="stylesheet" />

</head>
<body>
<div id="viewport-container">
<section id="sliding-container">
<article id="slide-0" class="displayed" style="display:block;"><span></span></article>
<article id="slide-1" style="display:none"><span></span></article>
<article id="slide-2" style="display:none"><span></span></article>
<article id="slide-3" style="display:none"><span></span></article>
</section>
</div>
<nav id="slider-nav">
<a id="btn-0" href="#slide-0" class="active"></a>
<a id="btn-1" href="#slide-1"></a>
<a id="btn-2" href="#slide-2"></a>
<a id="btn-3" href="#slide-3"></a>
</nav>

The following script controls the functionality:

<script>
$(document).ready(function () {
var $navButtons = $("#slider-nav > a");

$navButtons.click(
function () {
var $selectedButton = $(this);
var rawIdSlideToFadeIn = $selectedButton.attr("href");

$navButtons.removeClass("active");
$selectedButton.addClass("active");

crossFading(rawIdSlideToFadeIn);
});

function crossFading(rawIdSlideToFadeIn) {
var $slideToFadeIn = $(rawIdSlideToFadeIn);                
var $slideToFadeOut = $("article.displayed");
var idSlideToFadeIn = $slideToFadeIn.attr("id");
var idSlideToFadeOut = $slideToFadeOut.attr("id");                

if(idSlideToFadeIn != idSlideToFadeOut)
{
$slideToFadeOut.removeClass("displayed").css("style", "none").fadeOut();
$slideToFadeIn.addClass("displayed").css("style", "block").fadeIn();
}
}
});
</script>

Although there are areas for improvement, the core foundation has been established.

Special gratitude to SushiBalboha for steering me in the right direction.

Thank you sincerely

I want to create a custom jQuery slider totally from scratch

Answer №1

Answer №2

Answer №3

Similar questions

Avoid Refreshing the Page When Pressing the Like Button

Leverage Html5 to open and retrieve data from an Excel document

Retrieving component layout from file

Master the art of crafting precise searches with Js and Jquery

The process of AJAX polling a JSON-returning URL using jQuery's $.ajax() method does not appear to provide up-to-date responses

Using Angular 2: Exploring the power of observables for broadcasting events during a forEach loop

The initial navigation pill content failed to display in Bootstrap

Omitting specific modules from the Webpack DLL compilation

What is the best way to update just the image path in the source using jQuery?

Weird Chrome behaviors with CSS3 animations

After the build process, Nextjs Sitemap is eliminating the /en/ from all newly generated web links

Pause display as the window refreshes

Navigating a Mesh in 3D Space using three.js, Camera Movement, and physi.js

Merge JSON objects while retaining duplicate keys

Angular integration of Jquery UI datapicker with read-only feature

Exploring the Possibilities of Utilizing jqPlot with JSON Data

Issue with Google Charts where the label does not show outside of the bar if the bar is too small

I am looking to navigate between tabs on a multi-part form in order to submit all the form data

The jQuery Validate Plugin only validates emails when the user moves away from the input field

Steps to bold a specific word within a div on react native