Slider with Jquery
Even what we have explained so far with JQuery is enough to create a simple slider.
We tried to explain the codes of the slider, the preview of which you see below, as much as we could. Click to download the jQuery slider example. You can customize the images by changing their size and css codes. The example below was prepared by a high school student and is an answer to the question "how to make a slider in the simplest way". Explanations for Slider Example Wherever we want the slider to appear on our page, we add the following HTML codes to that part of the page. We place all the pictures we will use with no space between them. With CSS, we will ensure that only the 1st image is visible at first and the others will be hidden. We also place the button.png image to be used as a trigger 10 times side by side in a separate div.
However, we give each a different ID because the action will be taken according to which one is clicked in the JQuery section.
html part
Wherever we want the slider to appear on our page, we add the following HTML codes to that part of the page. We place all the pictures we will use with no space between them. With CSS, we will ensure that only the 1st image is visible at first and the others will be hidden. We also place the button.png image to be used as a trigger 10 times side by side in a separate div. However, we give each a different ID because the action will be taken according to which one is clicked in the JQuery section.
<div id="slideShow">
<img src="sliderImages/ustResim01.jpg" id="image1" />
<img src="sliderImages/ustResim02.jpg" id="picture2" />
<img src="sliderImages/ustResim03.jpg" id="picture3" />
<img src="sliderImages/ustResim04.jpg" id="picture4" />
<img src="sliderImages/ustResim05.jpg" id="picture5" />
<img src="sliderImages/ustResim06.jpg" id="picture6" />
<img src="sliderImages/ustResim07.jpg" id="image7" />
<img src="sliderImages/ustResim08.jpg" id="picture8" />
<img src="sliderImages/ustResim09.jpg" id="picture9" />
<img src="sliderImages/ustResim10.jpg" id="picture10" />
<div id="buttons">
<img src="sliderImages/buton.png" id="button1" />
<img src="sliderImages/buton.png" id=>"button2" />
<img src="sliderImages/buton.png" id="button3" />
<img src="sliderImages/buton.png" id="button4" />
<img src="sliderImages/buton.png" id="button5" />
<img src="sliderImages/buton.png" id="button6" />
<img src="sliderImages/buton.png" id="button7" />
<img src="sliderImages/buton.png" id="button8" />
<img src="sliderImages/buton.png" id="button9" />
<img src="sliderImages/buton.png" id="button10" />
</div>
</div>
We can use the following CSS codes by adapting them ourselves. Important places are explained next to the codes.
#slideShow{ // our main layer for this slider
width:750px; // we adjust the width and height according to our images.
height:350px;
margin:0px;
padding:0px;}
#image10,#image9, #image8, #image7, #image6, #image5, #image4, #image3, #image2
{display:none;} // We hide all images except the image that will appear first.
#buttonlar{ // div where we put the images to be clicked
position:relative;
bottom:60px;
width:458px;
margin:0px auto;
}
#slideShow img{
cursor:pointer;
margin:0px;}
We placed a button for each image to be displayed in the HTML section and gave different ids to the buttons. Now we need to create a function for each button as follows. Below you can see the function that will work for button1 and replicate it yourself for other buttons. Also, if you download the sample files, you can see all the codes. Each button makes one of the images visible while hiding the others. Since we did not know which image was currently open when the button was clicked, we played it safe and applied the hide method to all images.
$(document).ready(function(){
$("#button1").click(function() { // this function will be created for each button
$("#image1").fadeIn(); // show the relevant image
$("#image2, #image3, #image4, #image5, #image6, #image7, #image8, #image9, #image10").hide(); //hide other images
});
});