Multi-Image Slider

javascript css slider html4

12,225

There a couple of things you must do in order to customize the controls :

You have to have the controls in the first place. By default, the prev/Next controls are are set to false:

navigation: true
Next, we will create the actual arrows for the the controls using the navigationText options to parse the array of strings into real functioning HTML.
```
navigationText: [
      "<i class='fa fa-chevron-left'></i>",
      "<i class='fa fa-chevron-right'></i>"
   ] 
```
I almost forgot, when I reviewed your Fiddle, it wasn't functioning at all. There are at least 3 external files that are needed to run Owl Carousel.
1. Owl Carousel CSS (Optional Recommended):
  
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/jquery.owlcarousel/1.31/owl.carousel.css">
2. Owl Carousel Themed CSS (Optional):
  
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/jquery.owlcarousel/1.31/owl.theme.css">
3. Font-Awesome Icons CSS (Optional):
  
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
4. jQuery (Essential):
  
  <script src="https://cdn.jsdelivr.net/jquery/2.2.4/jquery.min.js"></script>
5. Owl Carousel JS (Essential):
  
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

PLUNKER

SNIPPET

<!DOCTYPE html>
<html>

<head>
  <!--These 4 external Files are necessary for Owl to function-->

  <!--<link rel="stylesheet" href="https://cdn.jsdelivr.net/jquery.owlcarousel/1.31/owl.carousel.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/jquery.owlcarousel/1.31/owl.theme.css">
  -->

  <!--This link is both owl CSS files combined into one-->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/g/[email protected](owl.carousel.css+owl.theme.css)">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/fontawesome/4.6.3/css/font-awesome.min.css">

  <!--<script src="https://cdn.jsdelivr.net/jquery/2.2.4/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/jquery.owlcarousel/1.31/owl.carousel.min.js"></script>
  <style>-->

  <!--This tag is both JS files combined-->
  <script src="https://cdn.jsdelivr.net/g/[email protected],[email protected]"></script>

  <style>
    /*
    | SVG Nav Arrow Style
    */
    /* https://gist.github.com/seeRead/11229083 */
    .prod-slider-container {
      position: relative;
      font-family: font-awesome;
    }
    .owl-buttons {
      display: flex;
      width: 100%;
      justify-content: space-between;
    }
    .owl-prev,
    .owl-next {
      position: absolute;
    }
    i.fa {
      cursor: pointer;
      position: absolute;
      font-size: 60px;
      padding-top: 8px;
      height: 64px;
      width: 72px;
      color: rgba(0, 0, 0, .5);
      background: rgba(0, 75, 222, .7);
      border-radius: 50%;
      display: table-cell;
    }
    .owl-prev,
    .owl-next {
      background-color: transparent;
      border: 0px none transparent;
      width: 0px;
      height: 0px;
    }
    .owl-perv {
      left: 0;
    }
    .owl-next {
      right: 72px;
    }
    .item {
      outline: 3px dashed grey;
    }
  </style>
</head>

<body>
  <!-- + PRODUCT SLIDERS -->
  <div class="prod-slider-container">
    <div class="inner-container">
      <div class="slider_header_text">
        <b>LIKE WHAT YOU SAW?</b> Purchase the products seen in the videos.</div>
    </div>

    <div class="owl-carousel">

      <div class="item">
        <img src="http://assets.daddario.com/core_landing_tst/images/headstock_tuner.png" alt="Tuner Image">
      </div>
      <div class="item">
        <img src="http://assets.daddario.com/core_landing_tst/images/headstock_tuner.png" alt="Tuner Image">
      </div>
      <div class="item">
        <img src="http://assets.daddario.com/core_landing_tst/images/headstock_tuner.png" alt="Tuner Image">
      </div>
      <div class="item">
        <img src="http://assets.daddario.com/core_landing_tst/images/headstock_tuner.png" alt="Tuner Image">
      </div>
      <div class="item">
        <img src="http://assets.daddario.com/core_landing_tst/images/headstock_tuner.png" alt="Tuner Image">
      </div>

    </div>
    <!--.owl-carousel-->


  </div>
  <!--.prod-slider-container-->

  <script>
    $(document).ready(function() {
      $('.owl-carousel').owlCarousel({
        items: 3,
        autoPlay: 3000,
        itemsDesktop: [1199, 3],
        itemsDesktopSmall: [979, 3],
        navigation: true,
        navigationText: [
          "<i class='fa fa-chevron-left'></i>",
          "<i class='fa fa-chevron-right'></i>"
        ]
      });
    });
  </script>

</body>

</html>

12,225

Author by

Emily Kendall Shortell

Very NEW to coding/Javascript/Jquery Unfortunately working in HTML4 due to the company i work for Le Sigh

Updated on June 04, 2022

Comments

Emily Kendall Shortell almost 2 years

I am looking to make a slider that holds multple images, its an extremely simple product slider with images that link to their product pages. I want the arrows to be on either side of the slider. I notice that when i also implement my slider it negates the "prettyPhoto" feature i have in the div before.

I am using HTML4 unfortunately. here is a JS fiddle i put together of my slider!

I cant get the arrows to show for some reason... and all the images are on top of eachother. im just not quite sure what im doing wrong with this. i am fairly new at javascript and sliders.

Thanks in advance for all the help.

I need it to look like this:
Emily Kendall Shortell over 7 years

I edited the plunker a bit to bring up the arrows, take away the background of it to make it cleaner and the arrows not so big, my biggest issue is the line underneath the arrow under the slider on both the left and right sides.... not sure how to remove it or why its there
zer00ne over 7 years

Url Not Found? Anyways it sounds like it's the link's style. Right click the underlines and inspect the element, Then apply text-decoration:none to it. The element should be an <a>nchor. I'd dig in there for you but I have to go to work.