Multi-Image Slider

Question 1

Multi-Image Slider

javascript css slider html4

Emily Kendall Shortell · Sep 15, 2016 · Viewed 11.2k times · Source

Answer

Answer

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>

Question 2

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:

Multi-Image Slider

Answer

SNIPPET

Related questions