javascript - 从头开始重新创建 slick js 响应中心模式

标签 javascript jquery html css

我正在尝试模仿或重新创建 slick.js 中心模式，其中 slider 在中心/中间聚焦，并在元素或容器的边缘显示上一张和下一张幻灯片。我已经成功构建了轮播，如下面的代码所示。

我想避免所有的膨胀，这就是我从头开始构建它的原因。

(function ($) {
        'use strict';

        var carousel = {

            init : function() {

                var carouselWidth = 0,
                    itemListContainer = $('.item-list').width(),
                    itemList = $('.carousel .item-list ul li'),
                    //containerWidth = $('.carousel .item-list').innerWidth(),
                    containerWidth = $(window).width(),
                    // itemWidth = itemList.outerWidth( containerWidth / 3 ),
                    itemWidth = itemList.outerWidth( containerWidth / 5, true ),

                    itemSize = itemWidth.outerWidth();



                //Set Container Width
                $('.carousel .item-list ul').children().each(function() {
                    carouselWidth += $(this).outerWidth(true);
                    $('.carousel .item-list ul').outerWidth(carouselWidth);
                });


                // var offset = itemSize * 3;
              

               // function dynamicItemWidth() {
               //      if ( $('body') <= 1024 ) {
               //          itemWidth = itemList.width( itemListContainer / 5 );
               //      }

               //      if ( $('body') <= 480 ) {
               //          itemWidth = itemList.width( itemListContainer / 2 );
               //      }

               //      if ( $('body') <= 320 ) {
               //          itemWidth = itemList.width( itemListContainer / 1 );
               //      }

               //  }

                // var itemWidth = itemList.width( browserWidth / 5 ),
                //     itemSize = itemWidth.width();

                $('.carousel .item-list ul').prepend( $('.carousel .item-list ul li:last') );
                $('.carousel .item-list ul').css('left', '-' +  itemSize + 'px'  );


                $('.btns .next').click(function(){

                    var move = $('.carousel .item-list ul li').outerWidth();
                    var leftIndent = parseInt($('.carousel .item-list ul').css('left')) - move;

                    function animate( repeat, speed ) {
                        $('.carousel .item-list ul:not(:animated)').animate({'left' : leftIndent}, speed,function(){
                            $('.carousel .item-list ul').append( $('.carousel .item-list ul li:first') );
                            $('.carousel .item-list ul').css({'left' : '-' +  move + 'px'});

                            if ( repeat > 1 ) {
                                animate( ( repeat - 1 ), speed );                     }
                        });
                    }

                    animate( 1, 300 );

                });

                $('.btns .prev').click(function() {

                    var move = $('.carousel .item-list ul li').outerWidth();

                    var leftIndent = parseInt($('.carousel .item-list ul').css('left')) + move;

                    function animate( repeat, speed ) {
                        $('.carousel .item-list ul:not(:animated)').animate({'left' : leftIndent}, speed,function(){
                            $('.carousel .item-list ul').prepend($('.carousel .item-list ul li:last'));
                            $('.carousel .item-list ul').css({'left' : '-' + move + 'px'});

                            if ( repeat > 1 ) {
                                animate( ( repeat - 1 ), speed );
                            }
                        });
                    }

                    animate( 1, 300 );

                });

            }

        }

        $(document).ready(function(){
            carousel.init();
        });


        $(window).on('resize', function() {
            carousel.init();  
        })

    })(jQuery);
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
   margin: 0;
   padding: 0;
   border: 0;
   font-size: 100%;
   font: inherit;
   vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
   display: block;
}

body {
   line-height: 1;
}

ol, ul {
   list-style: none;
}

blockquote, q {
   quotes: none;
}

blockquote:before, blockquote:after, q:before, q:after {
   content: '';
   content: none;
}

table {
   border-collapse: collapse;
   border-spacing: 0;
}

* {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
}

/* -- #Carousel -- */

.carousel {
   position: relative;
}

.carousel .item-list {
   box-sizing: content-box;
}

.carousel .item-list ul {
   display: flex;
   flex-wrap: wrap;
   list-style: none;
   margin-bottom: 10px;
   position: relative;
   overflow: hidden;
}

.carousel .btns {
   width: 100%;
   z-index: 10;
   top: 50%;
}

.carousel .btns li {
   display: inline-block;
   cursor: pointer;
}

.carousel.-aim-partners {
   position: relative;
}

.carousel.-aim-partners .item-list {
   margin: 0 auto;
}

.carousel.-aim-partners .item-list ul li {
   float: left;
   width: 230px;
   height: 110px;
   margin-top: 10px;
   margin-bottom: 10px;
   background-size: contain;
   background-repeat: no-repeat;
   background-position: center;
   padding: 10px;
}

.carousel.-aim-partners .item-list ul li>div {
   background-color: cyan;
   height: 100%;
}

.carousel.-aim-partners .btns {
   width: 110%;
   left: -70px;
}

.carousel.-aim-partners .btns li {
   width: 35px;
   height: 40px;
}

.carousel.-aim-partners .btns li.prev {
   background: url("../images/carousel-icon-arrow.png") no-repeat 15px 0;
}

.carousel.-aim-partners .btns li.next {
   background: url("../images/carousel-icon-arrow.png") no-repeat -20px 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
    <div class='carousel -aim-partners'>

      <div class='item-list'>
          <ul>
<!--               <li>1</li>
              <li>2</li>
              <li>3</li>
              <li>4</li>
              <li>5</li>
              <li>6</li>
              <li>7</li>
              <li>8</li>
              <li>9</li>
              <li>10</li>
              <li>11</li>
              <li>12</li>
              <li>13</li>
              <li>14</li>
              <li>15</li>
              <li>16</li>      -->        
              <li>
                <div>1</div>
              </li>
              <li>
                <div>2</div>
              </li>
              <li>
                <div>3</div>
              </li>
              <li>
                <div>4</div>
              </li>
              <li>
                <div>5</div>
              </li>
              <li>
                <div>6</div>
              </li>
              <li>
                <div>7</div>
              </li>






          </ul>
      </div>


        <ul class="btns">
            <li class="prev">
                <i class="fa fa-angle-left" aria-hidden="true">prev</i>
            </li>
            <li class="next">
                <i class="fa fa-angle-right" aria-hidden="true">next</i>
            </li>
        </ul>

    </div>
</div>

最佳答案 

(function ($) {
        'use strict';

        var carousel = {

            init : function() {

                var carouselWidth = 0,
                    itemListContainer = $('.item-list').width(),
                    itemList = $('.carousel .item-list ul li');
               

                // Set Container Width
                $('.carousel .item-list ul').children().each(function() {
                    carouselWidth += $(this).outerWidth();
                    $('.carousel .item-list ul').width(carouselWidth + 1000);
                });
              

               // function dynamicItemWidth() {
               //      if ( $('body') <= 1024 ) {
               //          itemWidth = itemList.width( itemListContainer / 5 );
               //      }

               //      if ( $('body') <= 480 ) {
               //          itemWidth = itemList.width( itemListContainer / 2 );
               //      }

               //      if ( $('body') <= 320 ) {
               //          itemWidth = itemList.width( itemListContainer / 1 );
               //      }

               //  }

                var itemWidth = itemList.width( itemListContainer / 5 ),
                    itemSize = itemWidth.width();

                $('.carousel .item-list ul').prepend( $('.carousel .item-list ul li:last') );
                $('.carousel .item-list ul').css('left', '-' +  itemSize + 'px');


                $('.btns .next').click(function(){

                    var move = $('.carousel .item-list ul li').outerWidth();
                    var leftIndent = parseInt($('.carousel .item-list ul').css('left')) - move;

                    function animate( repeat, speed ) {
                        $('.carousel .item-list ul:not(:animated)').animate({'left' : leftIndent}, speed,function(){
                            $('.carousel .item-list ul').append( $('.carousel .item-list ul li:first') );
                            $('.carousel .item-list ul').css({'left' : '-' +  move + 'px'});

                            if ( repeat > 1 ) {
                                animate( ( repeat - 1 ), speed );                     }
                        });
                    }

                    animate( 5, 100 );

                });

                $('.btns .prev').click(function() {

                    var move = $('.carousel .item-list ul li').outerWidth();
                    var leftIndent = parseInt($('.carousel .item-list ul').css('left')) + move;

                    function animate( repeat, speed ) {
                        $('.carousel .item-list ul:not(:animated)').animate({'left' : leftIndent}, speed,function(){
                            $('.carousel .item-list ul').prepend($('.carousel .item-list ul li:last'));
                            $('.carousel .item-list ul').css({'left' : '-' + move + 'px'});

                            if ( repeat > 1 ) {
                                animate( ( repeat - 1 ), speed );
                            }
                        });
                    }

                    animate( 5, 100 );

                });

            }

        }

        $(document).ready(function(){
            carousel.init();
        });

    })(jQuery);
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block;
}
body {
    line-height: 1;
}
ol,
ul {
    list-style: none;
}
blockquote,
q {
    quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
/* -- #Carousel -- */

.carousel {
    position: relative;
}
.carousel .item-list {
    overflow: hidden;
}
.carousel .item-list ul {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin-bottom: 10px;
    position: relative;
    overflow: hidden;
}
.carousel .btns {
    width: 100%;
    z-index: 10;
    top: 50%;
}
.carousel .btns li {
    display: inline-block;
    cursor: pointer;
}
.carousel.-aim-partners {
    position: relative;
}
.carousel.-aim-partners .item-list {
    max-width: 1204px;
    margin: 0 auto;
}
.carousel.-aim-partners .item-list ul li {
    float: left;
    width: 230px;
    margin-right: 18px;
    height: 110px;
    margin-top: 10px;
    margin-bottom: 10px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.carousel.-aim-partners .item-list ul li:nth-child(odd) {
    background-color: teal;
}
.carousel.-aim-partners .item-list ul li:nth-child(even) {
    background-color: #ccc;
}
.carousel.-aim-partners .btns {
    width: 110%;
    left: -70px;
}
.carousel.-aim-partners .btns li {
    width: 35px;
    height: 40px;
}
.carousel.-aim-partners .btns li.prev {
    background: url("../images/carousel-icon-arrow.png") no-repeat 15px 0;
}
.carousel.-aim-partners .btns li.next {
    background: url("../images/carousel-icon-arrow.png") no-repeat -20px 0;
}
/* -- End Carousel -- */
/*# sourceMappingURL=style.css.map */

.btns .prev,.next{
  position: relative;
  top:-5rem;
}
.btns .prev{
  float:left;
  left:2.5rem;
}
.btns .next{
  float:right;
  right:6rem;
}
.carousel.-aim-partners .item-list ul li:first-child{
 margin-left: -122px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
    <div class='carousel -aim-partners'>

      <div class='item-list'>
          <ul>
              <li>1</li>
              <li>2</li>
              <li>3</li>
              <li>4</li>
              <li>5</li>
              <li>6</li>
              <li>7</li>
              <li>8</li>
              <li>9</li>
              <li>10</li>
              <li>11</li>
              <li>12</li>
              <li>13</li>
              <li>14</li>
              <li>15</li>
              <li>16</li>             
              
          </ul>
      </div>


        <ul class="btns">
            <li class="prev">
                <i class="fa fa-angle-left" aria-hidden="true">prev</i>
            </li>
            <li class="next">
                <i class="fa fa-angle-right" aria-hidden="true">next</i>
            </li>
        </ul>

    </div>
</div>

关于javascript - 从头开始重新创建 slick js 响应中心模式，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47026903/

上一篇：javascript - 选项显示在 safari 中不起作用

下一篇：javascript - 停止从方法调用的 ajax 请求 (ES6)

相关文章：

javascript - 如何在 android 浏览器中捕获退格键代码 - javascript？

jquery - 在启动时重新定位我的图像

html - 如何水平居中元素？

html - div的高度大于图像

javascript - 网页中内容的优先级，并将一个元素放在另一个元素之前

javascript - 用空值替换选项

javascript - 如何将 Javascript keyCode 转换为 charCode？

javascript - 强制 CKEDITOR 刷新配置

javascript - Wordpress 管理员 ajax.php 400 错误请求

jquery - 页脚重叠

©2024 IT工具网  联系我们