CODEWITHSUNDEEP
javascripthtmlcssslide
Cenzy
Cenzy

Reputation: 17

How to create a text slider using Javascript

I want to realize a text slider like this:

http://www.federica.unina.it/ingegneria/ingegneria-del-software-ingegneria/progettazione-qualita-software/

There are arrows that will bring you to the next or previous page. I notice that when you click to arrow, the page is same. How can I make that?

Upvotes: 0

Views: 1515

Answers (1)

Kevin
Kevin

Reputation: 862

A simple way of doing that is creating multiple divs, make all display: none and use Javascript to control the buttons and show/hide divs based on where you are. For example, use the following javascript:

var page = 1;

$('#next').click( function() {
    $('#' + page).hide();
    page = page + 1;
    $('#' + page).show();
});

$('#previous').click( function() {
    $('#' + page).hide();
    page = page - 1;
    $('#' + page).show();
});

I created a jsfiddle so you can see the effect. Basically I have 3 divs with different content, and I switch the content by hiding and displaying the divs depending on what 'page' you are on. This does require jQuery. Using this example that I made, you will not be able to navigate to not existing pages.

Upvotes: 1

Related Questions