jQuery Slider #1

febeeh · 2021-06-26T21:23:04Z

febeeh
Jun 26, 2021
Maintainer

⭐ jQuery Slider ⭐

Develop Your Own Slider Using This jQuery Code. Click Here To See A Slider Developed By Using This Code

Documentation 📖

USAGE 📝 :

Default Values

var config = 
{
     objPerSlide: 4, // Per Slide 4 Objects Will Be Displayed By Default
}

Default Class Name :

Slider : slideme
Left Slide Button : left-slide
Right Slide Button : right-slide

Default Animation Class Name :

Slide To Left : slide-to-left-slider
Slide To Right : slide-to-right-slider
Slide To Top : slide-to-top-slider
Slide To Down : slide-to-down-slider
Fade In : fadein-slider
Fade Out : fadeout-slider

Get Started ⛄

Download JS Folder And Add To Your Website Directory.
Set Number Of Objects To Be Displayed In Each Slide

var config = 
{
     objPerSlide: 4, // Enter Here Total Number Object To Be Displayed In Each Slide
}

Configure Class Name ( js/slider.js ) :
⚠️ Dont Edit This If You Want To Use Default Class Name ❗❗❗

slider: ".slideme", // Enter here class name of slider ( Add this class name on each respective object classes).
left_slide: ".left-slide", // Enter here class name of your left slide button.
right_slide: ".right-slide" // Enter here class name of your right slide button.

Configure Animation ( js/slider.js ) :
⚠️ Dont Edit This If You Want To Use Default Animation Speed ❗❗❗

left_slide_speed: 500, // Left Slide Animation Speed (In Milliseconds)
right_slide_speed: 500, // right Slide Animation Speed (In Milliseconds)
top_slide_speed: 500, // Top Slide Animation Speed (In Milliseconds)
down_slide_speed: 500, // Down Slide Animation Speed (In Milliseconds)
fadein_speed: 1000, // FadeIn Animation Speed (In Milliseconds)
fadeout_speed: 1000, // FadeOut Animation Speed (In Milliseconds)

Add Class To Your Slider

<div class="slideme"> // First Object
     <img class="slide-to-down-slider" src="images/1.jpg">
     <h2 class="fadein-slider">TITLE HERE</h2>
     <p class="slide-to-top-slider">Text Here</p>
</div>
<div class="slideme"> // Second Object
     <img class="slide-to-down-slider" src="images/2.jpg">
     <h2 class="fadein-slider">TITLE HERE</h2>
     <p class="slide-to-top-slider">Text Here</p>
</div>
.
.
.

Slide Button Class Name

<a class="left-slide">❮</a>
<a class="right-slide">❯</a>

Create HTML File And Add Slider JS & jQuery JS File

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery Slider Template</title>
</head>

<body>

  
    <script src="js/jquery.min.js"></script>
    <script src="js/slider.js"></script>
</body>

</html>

Final Code Will Be 🏁 : ( This is just a example, this code wont work ❌ )

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery Slider Template</title>
</head>

<body>

  <div class="slideme"> // First Object
       <img class="slide-to-down-slider" src="images/1.jpg">
       <h2 class="fadein-slider">TITLE HERE</h2>
       <p class="slide-to-top-slider">Text Here</p>
  </div>
  <div class="slideme"> // Second Object
       <img class="slide-to-down-slider" src="images/2.jpg">
       <h2 class="fadein-slider">TITLE HERE</h2>
       <p class="slide-to-top-slider">Text Here</p>
  </div>
  .
  .
  .
  <a class="left-slide">❮</a>
  <a class="right-slide">❯</a>
   
  <script src="js/jquery.min.js"></script>
  <script src="js/slider.js"></script>

</body>

</html>

This discussion was created from the release jQuery Slider.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

jQuery Slider #1

Uh oh!

{{title}}

Uh oh!

Replies: 0 comments

Select a reply

Uh oh!

jQuery Slider #1

Uh oh!

febeeh Jun 26, 2021 Maintainer

⭐ jQuery Slider ⭐

Documentation 📖

USAGE 📝 :

Get Started ⛄

Replies: 0 comments

febeeh
Jun 26, 2021
Maintainer