博客文章的内容滑块

Question

我正在寻找类似于 this theme 中的 "Latest Projects" 滑块的内容滑块（它在主滑块下方的两个部分）。我想在没有任何 CMS 系统的情况下实现一个。我搜索了大量关键字，但没有找到任何有用的东西。如果你能给我一个关键字或类似的东西来寻找，我将不胜感激。

内容滑块必须在起始位置显示四个项目 - 对于这些导航滑块，它需要允许无限的项目。

提前感谢您的帮助！

ElTrusto

Answer 1

Bootstrap 内置了一个滑块（又名旋转木马）。使用 Bootstrap 的一个好处是您的网站变得 responsive（处理所有尺寸的屏幕/设备）。

Here is a demo 个 Bootstrap 滑块。

或者，您可以自己滚动。这里有几个来自 jsFiddle 的简单滑块演示：

$(function(){
 $('#slider li').hide().filter(':first').show();
 setInterval(slideshow, 3000);
});

function slideshow() {
 $('#slider li:first').fadeOut('slow').next().fadeIn('slow').end().appendTo('#slider');
}

#slider { 
    position:relative;
    margin:0;
    padding:0;
    list-style-type:none;
    width:650px;
    height:430px;
    border: 1px solid #008000;     
    overflow:hidden; 
}
#slider li { 
    position:absolute;        
}
#slider img {
    width:650px;
    height:430px;    
}
#slider p { 
    position:absolute;
    bottom:0;
    padding:20px;
    color:#ffffff;
    background-color: #008000;
    opacity: 0.6;
    margin:0;
    left:0;
    right:0; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul id="slider">
 <li>
  <a href="https://flic.kr/p/pq1UFA">
   <img src="https://c4.staticflickr.com/4/3867/15367978792_acd632254d_h.jpg" alt="Alter Apfelbaum"/>
  </a>
  <p>Alter Apfelbaum</p>
 </li>
 <li>
     <a href="https://flic.kr/p/ppXtn4">
         <img src="https://c3.staticflickr.com/3/2942/15367308281_cf8a164414_h.jpg" alt="Ruth St Flowers-191"/>
     </a>
     <p>Ruth St Flowers-191</p>
 </li>
 <li>
     <a href="https://flic.kr/p/pq5a4k">
         <img src="https://c4.staticflickr.com/4/3862/15368612485_251ef5de2f_h.jpg" alt="Canada Close In."/>
     </a>
     <p>Canada Close In.</p>
 </li>
</ul>

jsFiddle - Fade, repeating (same as above code snippet)

jsFiddle - Slide, on click

Bootstrap Tutorial （都是关于网格的——掌握了网格，你就掌握了Bootstrap）

关于滑块的重要一点是了解滑块 是什么： 它只是一个 DIV 容器，它包含其他几个 DIVs（每个内部 DIVs 都包含照片、<h1>（或其他）、<p> 带有文本的标签等，并且都排成一排-并排成一长排）。

想象一个纸板移动箱坐在地板上，left/right 侧面有孔，前面有观察口。您有一列鞋盒从左向右滑过，每个鞋盒都在观察口处停了下来。当每个鞋盒从移动箱中滑出时，它又被拉回火车的末端，如此循环往复。

关键秘密是纸板移动盒的样式为 position:relative;overflow:hidden;，每个鞋盒的样式为 float:left（它们并排对齐，因为 DIVs 的默认值是一个叠一个）。

每个鞋盒都是自己的立体模型。每个鞋盒都是一个容器，每个鞋盒里面可以有一张图片，一个 h1，一些并排的 divs，一个页脚——所有这些都在每个鞋盒里（又名 "container"，又名 div）。 每个鞋盒都是一个div。 DIVs 可以而且通常应该包含其他 divs。 <section>、<nav>、<aside>、<footer>都是DIV。为什么不同的名字？对于 SEO.

上面发布的示例应该可以满足您的需要。你只需要改变每个鞋盒的contents/shape。

Here is a great article 解释了大量有关样式容器的内容 divs （又名 "shoeboxes"）。

博客文章的内容滑块

Content Slider for Blogposts

html

javascript

jquery

responsive