Wosley Alarico Wosley Alarico - 25 days ago 7
jQuery Question

how can I make slider with text

As you can see in my snippet, I have a box with 3 links and a fontawesome icon. Now, I wanna be able to click on the font icon and make the content slide.
Say I have more than 3 links.Initially I wanna show three, but when I click on the arrow, it should show me the other icons.
And obviously as last,when I click on a link, it must show whatever content it has to show and hide whatever content it was being displayed.
Note: I can only have 3 links at the time.

Please help if you can.

Here my intial HTML markup:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<div class="bar">
<div class="latest-games">
<a href="">Latest Games</a>
</div>
<div class="progressive">
<a href="">Progressive</a>
</div>
<div class="video">
<a href="">Video</a>
</div>
<i class="fa fa-angle-right" aria-hidden="true"></i>
</div>


Here my styling:

.bar{
background-color: black;
display: flex;
padding: 10px 0;
justify-content: center;

a{
text-transform: uppercase;
font-weight: bold;
}

& > div{
width: 30%;
justify-content: center;
text-align: center;
}
i.fa.fa-angle-right {
margin-top: 4px;
color: white;
}
}


I wish I at least knew how to start on it but am unfortunately my previous sites were done in WordPress, so for all jquery fancy stuff I normally use plugins. For the sake of my bad luck I can't do this with wordpress for now.

Here is my codepen: http://codepen.io/Sidney-Dev/pen/qqbojV

Answer

My jquery is also not one of the bests yet. But this is what I could do for you and hope you can get some clue of what and how to improve from there:

HTML:

<div class="bar" id="slider">

  <div class="latest-games item">
    <a href="">Latest Games</a>
  </div>
  <div class="progressive item">
    <a href="">Progressive</a>
  </div>
  <div class="video item">
    <a href="">Video</a>
  </div>
   <div class="latest-games item">
    <a href="">Latest Games</a>
  </div>
  <div class="progressive item">
    <a href="">Progressive</a>
  </div>
  <div class="video item">
    <a href="">Video</a>
  </div>
   <div class="latest-games item">
    <a href="">Latest Games</a>
  </div>
  <div class="progressive item">
    <a href="">Progressive</a>
  </div>
  <div class="video item">
    <a href="">Video</a>
  </div>
  <i class="fa fa-angle-right" aria-hidden="true"></i>
</div>

SCSS:

.bar{
    background-color: black;
    display: flex;
    padding: 10px 0;
    justify-content: center;

    a{
        text-transform: uppercase;
        font-weight: bold;
    }

    & > div{
        width: 30%;
        justify-content: center;
        text-align: center;
    }
    i.fa.fa-angle-right {
        margin-top: 4px;
        color: white;
    }
}

jQuery:

$(document).ready(function() {

  $("#slider").owlCarousel({

      autoPlay: 3000, //Set AutoPlay to 3 seconds
       items : 3,
      itemsDesktop : [1199,3],
      itemsDesktopSmall : [979,3]

  });

});

Best of luck

Comments