光滑滑条centerMode

时间：2018-08-08 15:10:24

标签： javascript jquery carousel slick slick.js

我一直在尝试使用slick.js创建类似this的东西，但我实在无法解决。

我已经安装了当前代码。如何使中心幻灯片图像的宽度和高度为100％，并向幻灯片中添加填充？它似乎不起作用。

非常感谢您的帮助。谢谢。

$('.slider').slick({
  centerMode: true,
  centerPadding: '30px',
  slidesToShow: 3,
  adaptiveHeight: false
});
.slick-slide img {
  max-width: 100%; 
  transition: transform 0.5s; 
 }

.slick-slide.slick-center img{
  transform: scale(2.1);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>


<div class="slider">
  <div class="slider__item">
    <img src="https://pp.userapi.com/c849132/v849132998/45c5c/RSTineyyvfE.jpg" alt="">
  </div>
  <div class="slider__item">
    <img src="https://pp.userapi.com/c849132/v849132998/45c5c/RSTineyyvfE.jpg" alt="">
  </div>
  <div class="slider__item">
    <img src="https://pp.userapi.com/c849132/v849132998/45c5c/RSTineyyvfE.jpg" alt="">
  </div>
  <div class="slider__item">
    <img src="https://pp.userapi.com/c849132/v849132998/45c5c/RSTineyyvfE.jpg" alt="">
  </div>
  <div class="slider__item">
    <img src="https://pp.userapi.com/c849132/v849132998/45c5c/RSTineyyvfE.jpg" alt="">
  </div>
  <div class="slider__item">
    <img src="https://pp.userapi.com/c849132/v849132998/45c5c/RSTineyyvfE.jpg" alt="">
  </div>
</div>

1 个答案:

答案 0 :(得分：0)

少量CSS应该可以帮助您

const original_json = [{
    "pageID": "93",
    "page_type_id": "2",
    "display_id": "2",
    "slide_order": null,
    "duration": "74",
    "background_img": "images\/bg_rainbow.svg",
    "panel_id": "86",
    "panel_type_id": "2",
    "cont_id": "138",
    "contID": "138",
    "content": "\r\n\r\n\r\n<\/head>\r\n\r\nLeft 93<\/p>\r\n<\/body>\r\n<\/html>"
  },
  {
    "pageID": "93",
    "page_type_id": "2",
    "display_id": "2",
    "slide_order": null,
    "duration": "74",
    "background_img": "images\/bg_rainbow.svg",
    "panel_id": "87",
    "panel_type_id": "3",
    "cont_id": "139",
    "contID": "139",
    "content": "\r\n\r\n\r\n<\/head>\r\n\r\nRight 93<\/p>\r\n<\/body>\r\n<\/html>"
  },
  {
    "pageID": "94",
    "page_type_id": "2",
    "display_id": "2",
    "slide_order": null,
    "duration": "74",
    "background_img": "images\/bg_rainbow.svg",
    "panel_id": "87",
    "panel_type_id": "3",
    "cont_id": "139",
    "contID": "139",
    "content": "\r\n\r\n\r\n<\/head>\r\n\r\nPage 94<\/p>\r\n<\/body>\r\n<\/html>"
  },
  {
    "pageID": "95",
    "page_type_id": "2",
    "display_id": "2",
    "slide_order": null,
    "duration": "74",
    "background_img": "images\/bg_rainbow.svg",
    "panel_id": "87",
    "panel_type_id": "3",
    "cont_id": "139",
    "contID": "139",
    "content": "\r\n\r\n\r\n<\/head>\r\n\r\nPage 95<\/p>\r\n<\/body>\r\n<\/html>"
  }
];

let counter = 0;

var fullContent = document.getElementById('fullContent');
var leftContent = document.getElementById('leftContent');
var rightContent = document.getElementById('rightContent');

var fullColumn = document.getElementById('fullColumn');
var leftColumn = document.getElementById('leftColumn');
var rightColumn = document.getElementById('rightColumn');


// loop through original json
// for each item, get page ID and see if we've already created a new Page object for it
// if we have, add the object from the original json to the "content" array of the new page object
// otherwise, create a new Page object to put in our new array
const pages_array = original_json.reduce(function(pages_array, item, index, original_json) {
  const current_pageID = item.pageID;
  const exisiting_page = pages_array.find(page => page.pageID === current_pageID);

  if (exisiting_page === undefined) {
    const new_Page = {
      pageID: current_pageID,
      content: [item]
    }
    pages_array.push(new_Page);
  } else {
    exisiting_page.content.push(item)
  }

  return pages_array;
}, []);

// Open console to see data
console.clear();
console.log(pages_array); //this prints correct array

setInterval(() => { //here I loop through pages, but i need to loop within here over content to render html
  const currentJSONobject = pages_array[counter];
  if (currentJSONobject.page_type_id == 2) {

    fullColumn.style.display = "none";

    if (currentJSONobject.panel_type_id == 2) {

      leftContent.innerHTML = currentJSONobject.content;

    } else if (currentJSONobject.panel_type_id == 3) {

      rightContent.innerHTML = currentJSONobject.content;
    }

  }


  console.log(pages_array[counter])

  counter += 1;
  if (counter === pages_array.length) {
    counter = 0;
  }

}, 1500)
<div class="row middle" id="middle" style="background-image: url();">


  <!-- Half Page Divs -->
  <div class="col-lg-6 leftColumn">

    <div class="leftContent" id="leftContent" style=" height: 100%; ">

    </div>
  </div>

  <div class="col-lg-6 rightColumn">

    <div class="rightContent" id="rightContent" style=" height: 100%; ">

    </div>

  </div>
  <!-- End Half Page Divs -->

</div>
<!-- End Row Middle -->
$('.slider').slick({
  centerMode: true,
  centerPadding: '30px',
  slidesToShow: 3
});

原理很简单：使用.slick-slide > div { transform: scale(.5); transition: transform .3s cubic-bezier(.4,0,.2,1); } .slick-center > div { transform: scale(1); } .slider__item > img { width: 100%; height: auto; }缩小所有幻灯片的大小（其中<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script> <div class="slider"> <div class="slider__item"> <img src="https://pp.userapi.com/c849132/v849132998/45c5c/RSTineyyvfE.jpg" alt=""> </div> <div class="slider__item"> <img src="https://pp.userapi.com/c849132/v849132998/45c5c/RSTineyyvfE.jpg" alt=""> </div> <div class="slider__item"> <img src="https://pp.userapi.com/c849132/v849132998/45c5c/RSTineyyvfE.jpg" alt=""> </div> <div class="slider__item"> <img src="https://pp.userapi.com/c849132/v849132998/45c5c/RSTineyyvfE.jpg" alt=""> </div> <div class="slider__item"> <img src="https://pp.userapi.com/c849132/v849132998/45c5c/RSTineyyvfE.jpg" alt=""> </div> <div class="slider__item"> <img src="https://pp.userapi.com/c849132/v849132998/45c5c/RSTineyyvfE.jpg" alt=""> </div> </div>是您想要的因子-在上例中为transform: scale(n)）。使用居中的n类（具有.5类）上的transform:scale(1)以真实比例（1：1）进行渲染。
并在.slide-center上添加transition。

完成。

相关问题
最新问题