Slider JS

<!--
Every Slider works fairly simliar so the goal of Slider.js is to make 
the process of creating and integrating slider into your website easy.

With this script all you need is basic HTML knowledge to get this to work.

Breaking down a slider to its simplest parts comes down to 4 items:
- Scroll left button - Makes the slider scroll left
- Scoll right button - Makes the slider go right
- Slider Container - The container that will contain all the slides
- Slide - An individaul slide in the slider
-->

<!--For the first portion we want to install the scripts to make the sliding mechanics work-->
<!--Include JQuery. If already on website ignore this one-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<!--Include Slider JS-->
<script src="https://dash.pushabl.com/wp-content/themes/pushws-hello-child/js/slider.js?v=1.0.0"></script>

<!--2nd portion is to add some styling to make the slider function and look good

The most important styles that will be required will be the styles applied to the
.slider-track

the slider track requires the following styles:
display: flex; 
flex-direction: row; 
-Allows slides to be positioned right next to each other and overflow out of thier container

overflow-x: scroll; 
- will let the container scroll left and right
-->
<style>
section {
    max-width: 1500px;
    margin: auto;
    padding: 50px;
}
nav {
    text-align: right;
    padding: 10px;
}

/*Slider Styles*/
.slider-track {
    display: flex;
    flex-direction: row;
    gap: 25px;
    margin: auto;
    overflow-x: scroll;
    scroll-behavior: smooth;
    padding-bottom: 10px;
}
.slide {
    border: 1px solid #000;
    min-width: 400px;
    padding: 25px;
    min-height: 300px;
}
.scroll_left {
    rotate: 180deg;
}
/*End of Slider Styles*/


/*Scrollbar Styles*/
/* width */
#slider::-webkit-scrollbar {
  width: 5px;
  height: 5px;
  border-radius: 500px;
}

/* Track */
#slider::-webkit-scrollbar-track {
  background: #ccc;
  border-radius: 500px;
}

/* Handle */
#slider::-webkit-scrollbar-thumb {
  background: #000;
  border-radius: 500px;
}

/* Handle on hover */
#slider::-webkit-scrollbar-thumb:hover {
  background: #000;
}
/*End of Scrollbar Styles*/
</style>


<!--
For the navigation button, there are two items to keep in mind about
- the class: scroll_left or scroll_right
- the slider attribute: This should target the ID of the slider you wish to add controls for.

For example:
The slider container with the ID "slider" should be the target slider for the nav buttons
so thats why you see slider="slider" on the nav buttons

(Basically you are assigning the nav buttons to specific slider, this allows the JS to now what slider is should be navigation for and to know wether to slide right or left)

The purpose of this is to create slider logic that can be easily duplicated and reused in multiple instances without having write any logic for all the sliders.
-->


<section>

    <!--Slide Navigation-->
    <nav>
        <img src="https://thepastryacademy.com/wp-content/uploads/2024/01/right-1.png" width="40" height="40" class="scroll_left" slider="slider" >
        <img src="https://thepastryacademy.com/wp-content/uploads/2024/01/right-1.png" width="40" height="40" class="scroll_right" slider="slider">
    </nav>
    <!--Slide Navigation-->

    <!--Slider Wrap-->
    <div id="slider" class="slider-track">

       <div class="slide">
           <!--Slide 1-->
           <h1>Slide 1</h1>
       </div>
       <div class="slide">
           <!--Slide 2-->
           <h1>Slide 2</h1>
       </div>
       <div class="slide">
           <!--Slide 3-->
           <h1>Slide 3</h1>
       </div> 
       <div class="slide">
           <!--Slide 4-->
           <h1>Slide 4</h1>
       </div>
       <div class="slide">
           <!--Slide 5-->
           <h1>Slide 5</h1>
       </div> 
       <div class="slide">
           <!--Slide 6-->
           <h1>Slide 6</h1>
       </div> 
    </div>
    <!--End of Slider Wrap-->

</section>