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

Tips for ensuring that Breadcrumbs are displayed properly with the noWrap feature

Creating a notification feature for an HTML application

How to mock nested functions within sinon

From AJAX response to React state attribute, store the JSON data

Working with dynamic checkbox values in VueJS 2

How can you switch between CSS styles using JQuery?

How to make an HTTPS REST API request in Node.js with JSON body payload

Changes to the model cannot be realized unless $scope.$apply is used

After clicking multiple times within the modal, the modal popup begins to shift towards the left side

How can I load data into Vuex store before the application starts?

Ways to dynamically change the textbox value without having to refresh the page by utilizing AJAX in MVC

Utilizing image backgrounds for hyperlinks in the Android browser

Executing Jquery ajax calls in sequence to ensure response order

Creating a new version of an existing method found within a component in a Vue store.js file

Troubleshooting IE compatibility for $.trim() jQuery functionality

Trouble with jquery/ajax form submission functionality

Troubleshooting: Unable to modify value with function in AngularJS

What are the best strategies for handling complex task operations in Node.js Express.js?

Tips for integrating semantic HTML with React components

`Can a creation of this nature be accomplished?`