How to create a slideshow player with JQuery

Do Slide show on the site is a common thing, but this time we will try to add effects player in Slide show with JQuery. Later pictures in Slide show will change automatically.

Then how do you do Slideshow player with JQuery? It’s easy, let’s just open your computer and follow some simple steps below.

1. Download Plugins. And prepare six pictures and put them in the pictures folder. Place the images folder and plugin files in the same folder as the index.html and style.css files.

2. Open the XAMPP control panel and activate Apache.

3. Open the text editor program installed on your computer, here I use the text editor Notepad ++. Enter the following HTML5 code.

    Membuat Slide Show Player dengan JQuery            

Save the above HTML5 code in the xampplite folder – htdocs – create a new folder named Slideshow Player – save the code above with the name index.html.

4. To see the results of the script code above, you can open your browser and type http: // localhost / SlideShowPlayer.

5. Enter the following CSS code.

ul.gallery-slideshow > img, ul {margin: 0; padding: 0;}ul.gallery-slideshow {  position: relative;  list-style: none;  background: #000000;  overflow: hidden;}ul.gallery-slideshow li img {  position: absolute;  min-width: 100%; min-height: 100%;}/*gallery controls*/.gallery-control{  position: absolute; z-index: 1;  top: 0; bottom: 0;  width: 40px; height: 40px;  background: rgba(0,0,0,0.8);  margin: auto;  cursor: pointer;}.gallery-control.prev { left: -5px; }.gallery-control.next { right: -5px; }.gallery-control.trigger {  left: 0; right: 0;  width: 50px; height: 50px;  border-radius:50%;-webkit-border-radius:50%;-moz-border-radius:50%;}.gallery-control:after{  position: absolute;  z-index: 2;  top: 0; bottom: 0; left: 0; right: 0;  margin: auto;  content: "";  width: 20px; height: 20px;  box-sizing: border-box;  border-style: solid;  border-color: transparent;}.gallery-control.prev:after {  border-width: 10px 15px 10px 0px;  border-right-color: #ffffff;}.gallery-control.next:after {  border-width: 10px 0px 10px 15px;  border-left-color: #ffffff;}.gallery-control.trigger.pause:after{  border-style: double;  border-width: 0px 0px 0px 20px;  border-color: #ffffff;}.gallery-control.trigger.play:after{  left: 5px;  border-width: 10px 0px 10px 20px;  border-left-color: #ffffff;}/*gallery navigation*/ul.gallery-slideshow ul.gallery-navbar{  position: absolute;  bottom: 5%;  width: 100%;  text-align: center;}ul.gallery-navbar li{  all: unset;  position: relative;  display: inline-block;  width: 15px; height: 15px;  background: rgba(255,255,255,0.5);  margin: 10px;  border-radius:50%;-webkit-border-radius:50%;-moz-border-radius:50%;  cursor: pointer;}ul.gallery-navbar li.active{ background: rgba(255,255,255,1); }/**STATES**/ul.gallery-navbar li:hover, .gallery-control:hover{ transform: scale(0.9); }ul.gallery-navbar li:hover{ background: rgba(255,255,255,0.8); }ul.gallery-navbar li:active, .gallery-control:active { transform: scale(0.8); }

Save the above CSS code in the xampplite folder – htdocs – open the folder Slideshow Player – save the code above with the name style.css.

6. Reload the URL address: http: // localhost / SlideShowPlayer.

7. Display images at the same time Slideshow player, open a new worksheet in a text editor and enter the following JavaScript code.

//Attach plugin to slideshow with ".gallery-slideshow" class$(function() {  $('.gallery-slideshow').slideshow({    interval: 2000,    width: 600,    height: 400  });});

Save the above JavaScript code in the xampplite folder – htdocs – open the folder Slideshow Player – save the code above with the name jquery-main.js.

8. Reload the URL address: http: // localhost / SlideShowPlayer. First view Slide show. Picture on Slide show changes automatically according to the order in the index.html file.

When the cursor touches Slide shows, so Slide show displays the button Game break, and the left / right slider. Click button Break to stop Slide shows.

9. Done, very interesting, isn’t it?

Remarks:

  1. Htdocs is one of the standard folders of XAMPP, whose special task is to store files to be executed such as PHP, HTML, CSS and JavaScript files.
  2. Then someone can ask about the meaning of http: // localhost / SlideShowPlayer. Localhost is a local server on the computer. Localhost can be activated by clicking Start Apache in the XAMPP control panel. SlideShowPlayer points to my SlideShowPlayer folder in xampplite – htdocs. Also, index.html and style.css are the names of the files stored in the script code above.

Hence the explanation of the tutorial ‘How to Make Slideshow player with JQuery ‘. Much luck.






Leave a Reply

Your email address will not be published.