CODEWITHSUNDEEP
jqueryhtmlcsssass
Sidney Sousa
Sidney Sousa

Reputation: 3614

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

Upvotes: 1

Views: 92

Answers (2)

Elton Sousa
Elton Sousa

Reputation: 421

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

Upvotes: 1

Aslam
Aslam

Reputation: 9690

You need to use a jquery plugin. You have to include few files and you are ready to go.

This http://owlgraphic.com/owlcarousel/demos/images.html should get you started.

Upvotes: 1

Related Questions