Create a slideshow using HTML5 , CSS3 and jQuery
Repository
https://github.com/jquery/jquery
What Will I Learn?
I will learn how to create a slideshow to show images or news ..etc using HTML5 , CSS3 and jQuery.
- How to change between remove and add classes
- How to append element to another element ( appendTo / insertBefore )
- How to change the title depends the image that we press
Requirements
- Knowledge about HTML5 and CSS3
- Knowledge about jQuery
- A text editor like notpad ++
Difficulty
- Basic
Description
In this tutorial we will create a slideshow using HTML5 , CSS3 and jQuery to show images , title , description and button of more .
HTML File :
In my HTML file I have created a div ' slider ' which is the content of my slider , and a div informations that contains the title , description about the image and a button ' more ' .
Inside this div I have two other divs the first for the enableImages and I have 3 enableImages and 3 disableImages , the div contains three list items each one has an image and a class enableImg , and the disableImages contains three list items each one has an image and a class disableImg , this class is disabled because of the display : none propriety in the CSS file .
After that I have two indecators ( left and right ) when we click on the right button it will give us the next image and when we click on the left it will give us the previous image .
CSS File :
In my CSS file I added some proprieties for the classes ( colors , backgrounds , size , width , height ..etc ) to give the best form to my slider and this is the slider .
jQuery File :
I have used firstly the 3.1.1 version of jQuery , which possesses distinctive properties , then I created my plugins jQuery file .
- I used the $(function(){});
which means when the page is loaded the content inside the function will be executed.
I defined two variables the left and right by the symbols ' r and l ' .
- I selected the left element by $('.left') by the class ' .left ' and I used also the click event with a function by the $('.left').click(function() {....});
Inside my function I have tested the left value to get the correct image because we have 6 images 3 in the disableImages and 3 in the enableImages .
- I used the removeClass , addClass , appendTo , insertBefore methods to generate the exchange in appearance and disappearance.
- When the right equals to 3 and we clicked on the left the right will appear , because when the right equals to 3 it will disappear .
if ((r === 3) && (l > 0)) {
$('.right').show();
}
And when the right equals to the left , the left button will disappear .
- The same thing in the right class I used the click event and the same methods to generate the next image .
- When we click on the image the first image $('.menuSlider ul li:first-of-type')
we will modify the html of the title
$('.informations h3').html('Title image #01');
Video Tutorial
Curriculum
This is the first video in this tutorial .
Nice work @alexendre-maxim. I like how you started right from scratch and finished with a complete functioning project.
24.20 I like how you found a solution to a problem then explained the solution to the learner.
30:40 another issues arises in the code. Once you figured it out I would have liked you to explain to the learners exactly what the issue was.
In your post text there are many errors in your grammar. It would be a good idea to have someone proof read your post before you post. I would be happy to help with some of that for you.
Your contribution has been evaluated according to Utopian policies and guidelines, as well as a predefined set of questions pertaining to the category.
To view those questions and the relevant answers related to your post, click here.
Need help? Write a ticket on https://support.utopian.io/.
Chat with us on Discord.
[utopian-moderator]
I have the honor to provide information to lerners , I am trying to make the best , thank you sir .
Keep up the good work @alexendre-maxim. I look forward to more contributions from you. :)
Hey @alexendre-maxim
Thanks for contributing on Utopian.
We’re already looking forward to your next contribution!
Want to chat? Join us on Discord https://discord.gg/h52nFrV.
Vote for Utopian Witness!
Thank you
✅ @alexendre-maxim, enjoy the vote!
Have you claimed your FREE Byteballs yet? Check out this post on how you can get $10-80 just for having a Steem account: https://steemit.com/steem/@berniesanders/get-free-byteballs-today-just-for-having-a-steem-account-usd10-80-in-free-coins
Thank you
Congratulations @alexendre-maxim! You have completed the following achievement on Steemit and have been rewarded with new badge(s) :
Click on the badge to view your Board of Honor.
If you no longer want to receive notifications, reply to this comment with the word
STOP
Thank you