引导列内的光滑滑块自定义点 [英] Slick slider custom dots inside bootstrap columns

查看：26
本文介绍了引导列内的光滑滑块自定义点的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有 6 个引导程序列，其中包含对每张幻灯片的简短描述.是否可以用这些列替换默认的光滑滑块点?最重要的部分是我想保留现有的布局，而不是像默认点那样将它们全部内联.

HTML

<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.css";rel=样式表"/><link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick-theme.css";rel=样式表"/><script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.js"></script><div id="轮播";类=滑块"><div class="slider-item">1</div><div class="slider-item">2</div><div class="slider-item">3</div><div class="slider-item">4</div><div class="slider-item">5</div><div class="slider-item">6</div>

<div class="container"><div class="extra-dots-box row"><div class="dot-1 col-md-4 col-lg-4"><div class="extra-dot"><h3>自定义标题</h3><p>lorem ipsum lorem ipsum</p>

<div class="dot-2 col-md-4 col-lg-4"><div class="extra-dot"><h3>自定义标题 2</h3><p>lorem ipsum lorem ipsum</p>

<div class="dot-3 col-md-4 col-lg-4"><div class="extra-dot"><h3>自定义标题 3</h3><p>lorem ipsum lorem ipsum</p>

<div class="dot-4 col-md-4 col-lg-4"><div class="extra-dot"><h3>自定义标题 4</h3><p>lorem ipsum lorem ipsum</p>

<div class="dot-5 col-md-4 col-lg-4"><div class="extra-dot"><h3>自定义标题 5</h3><p>lorem ipsum lorem ipsum</p>

<div class="dot-6 col-md-4 col-lg-4"><div class="extra-dot"><h3>自定义标题 6</h3><p>lorem ipsum lorem ipsum</p>

CSS

.slider-item {边框:5px 实心 #333；背景:#ccc;高度:200px；字体大小:72px；文本对齐:居中；行高:200px；}/* 滑块箭头 */.slick-arrow {z-索引:9；}.slick-prev {左:0；}.slick-next {右:0；}/* 额外的点 */.extra-dots-box{边距顶部:100px；底边距:100px；}.extra-dots-box .extra-dot{高度:250px；背景:#111111；颜色:#ffffff；字体大小:18px；对齐项目:居中；对齐内容:居中；显示:弹性；填充:15px；弹性方向:列；底边距:30px；}.extra-dots-box .extra-dot:hover{光标:指针；}.extra-dots-box .extra-dot:hover,.extra-dots-box .extra-dot.active {背景:红色；}.slick-dots li a{宽度:25px；高度:25px；边界半径:50%；背景:#111111；颜色:#ffffff！重要；显示:弹性；对齐内容:居中；对齐项目:居中；}

jQuery

$(document).ready(function() {var slickOpts = {幻灯片显示:1，幻灯片滚动:1，自动播放:真实，//centerMode: 真,easing: 'swing',//见 http://api.jquery.com/animate/速度:700，点:对，};//初始化圆滑的轮播$('#carousel').slick(slickOpts);});

解决方案

要突出显示正确的导航块，您可以为每个块添加一个唯一 ID(例如 extra-#)，这将允许 JS瞄准它.

<div id="extra-0";class =额外点"><h3>自定义标题</h3><p>lorem ipsum lorem ipsum</p>
<div class="dot-1 col-md-4 col-lg-4"><div id="extra-1";class =额外点"><h3>自定义标题</h3><p>lorem ipsum lorem ipsum</p>
...

然后使用 afterChange Slick 事件，您可以在与活动幻灯片相关的框中添加一个 active 类.

$('#carousel').on('afterChange', function(event, slick, currentSlide){//删除任何现有的高亮$('.extra-dot').removeClass('active');//为当前幻灯片对应的框添加高亮$(`#extra-${currentSlide}`).addClass('active');});

要将您的框变成导航，您可以添加一个 onClick 事件，该事件使用相应幻灯片的 # 调用 slickGoTo 方法.

I have 6 bootstrap columns that contain a short description for each slick slide. Is it possible to replace the default slick slider dots with these columns? The most important part is that I want to keep the existent layout and not having them all inline like the default dots.

jsfiddle demo

As an example, when the slide 4 is active ( autoplay: true ), column 4 will have a red background color. If slide 5 is active, column 5 will have a red background and so on.

HTML

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick-theme.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.js"></script>
        
        <div id="carousel" class="slider">
          <div class="slider-item">1</div>
          <div class="slider-item">2</div>
          <div class="slider-item">3</div>
          <div class="slider-item">4</div>
          <div class="slider-item">5</div>
          <div class="slider-item">6</div>
        </div>
        
        <div class="container">
          <div class="extra-dots-box row">
            <div class="dot-1 col-md-4 col-lg-4">
              <div class="extra-dot">        
                <h3>Custom Title</h3>
                <p>lorem ipsum lorem ipsum</p>
              </div>
            </div>
          
            <div class="dot-2 col-md-4 col-lg-4">
              <div class="extra-dot">       
                <h3>Custom Title 2</h3>
                <p>lorem ipsum lorem ipsum</p>
              </div>
            </div>
            
            <div class="dot-3 col-md-4 col-lg-4">
              <div class="extra-dot">       
                <h3>Custom Title 3</h3>
                <p>lorem ipsum lorem ipsum</p>
              </div>
            </div>
            
            <div class="dot-4 col-md-4 col-lg-4">
              <div class="extra-dot">       
                <h3>Custom Title 4</h3>
                <p>lorem ipsum lorem ipsum</p>
              </div>
            </div>
            
            <div class="dot-5 col-md-4 col-lg-4">
              <div class="extra-dot">       
                <h3>Custom Title 5</h3>
                <p>lorem ipsum lorem ipsum</p>
              </div>
            </div>
            
            <div class="dot-6 col-md-4 col-lg-4">
              <div class="extra-dot">        
                <h3>Custom Title 6</h3>
                <p>lorem ipsum lorem ipsum</p>
              </div>
            </div>
            
          </div>
        </div>

CSS

.slider-item {
  border: 5px solid #333;
  background: #ccc;
  height: 200px;
  font-size: 72px;
  text-align: center;
  line-height: 200px;
}
/* Slider arrows */
.slick-arrow {
  z-index: 9;
}
.slick-prev {
  left: 0;
}
.slick-next {
  right: 0;
}
/* extra dots */
.extra-dots-box{
  margin-top: 100px;
  margin-bottom: 100px;
}
.extra-dots-box .extra-dot{  
  height: 250px;
  background: #111111;
  color: #ffffff;
  font-size: 18px;
  align-items: center;
  justify-content: center;
  display: flex;
  padding: 15px;
  flex-direction: column;
  margin-bottom: 30px;
}
.extra-dots-box .extra-dot:hover{
  cursor: pointer;
}
.extra-dots-box .extra-dot:hover,.extra-dots-box .extra-dot.active {
  background: red;
}
.slick-dots li a{
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #111111;
  color: #ffffff!important;
  display: flex;
  justify-content: center;
  align-items: center;
 }

jQuery

$(document).ready(function() {
  var slickOpts = {
    slidesToShow: 1,
    slidesToScroll: 1,
    autoplay: true,
    //centerMode: true,
    easing: 'swing', // see http://api.jquery.com/animate/
    speed: 700,
    dots: true,
  };
  // Init slick carousel
  $('#carousel').slick(slickOpts);
});

解决方案

To highlight the correct navigation block, you could add a unique ID (e.g. extra-#) to each block which will allow JS to target it.

<div class="dot-1 col-md-4 col-lg-4">
  <div id="extra-0" class="extra-dot">        
    <h3>Custom Title</h3>
    <p>lorem ipsum lorem ipsum</p>
  </div>
</div>
<div class="dot-1 col-md-4 col-lg-4">
  <div id="extra-1" class="extra-dot">        
    <h3>Custom Title</h3>
    <p>lorem ipsum lorem ipsum</p>
  </div>
</div>

...

Then using the afterChange Slick event, you can add an active class to the box related to the active slide.

$('#carousel').on('afterChange', function(event, slick, currentSlide){
    // remove any existing highlight
    $('.extra-dot').removeClass('active');

    // add highlight to box corresponding to the current slide
    $(`#extra-${currentSlide}`).addClass('active');
});

To turn your boxes into navigation, you can add an onClick event that calls the slickGoTo method with the # of the corresponding slide.

<div id="extra-1" class="extra-dot" onclick="$('#carousel').slick('slickGoTo', 1)">
...
</div>

这篇关于引导列内的光滑滑块自定义点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆