Question

正如你在我的片段中看到的，我有一个包含3个链接和一个fontawesome图标的框。现在，我想能够点击字体图标并使内容滑动。说我有超过3个链接。最初我想要显示三个，但是当我点击箭头时，它应该显示其他图标。显然，最后，当我点击链接时，它必须显示它要显示的任何内容并隐藏它显示的任何内容。注意：我当时只能有3个链接。

如果可以，请帮忙。

这是我的初始HTML标记：

<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>

这是我的造型：

.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;
    }
}

我希望我至少知道如何开始它但不幸的是我以前的网站是在WordPress完成的，所以对于所有jquery花哨的东西，我通常使用插件。为了运气不好，我现在不能用wordpress做这件事。

这是我的代码：http://codepen.io/Sidney-Dev/pen/qqbojV

Answer 1

您需要使用jquery插件。你必须包含一些文件，然后就可以开始了。

此http://owlgraphic.com/owlcarousel/demos/images.html应该可以帮助您入门。

Answer 2

我的jquery也不是最好的之一。但这就是我能为你做的事情，并希望你能从中得到一些改进的线索：

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]

  });

});

祝你好运

如何制作带文字的滑块

2 个答案: