居中幻灯片图像

Question

我正在使用 Cycle2 旋转木马插件，我所有的图像宽度都不同，这就是为什么我想将图像居中，但我想知道我的父包装器宽度是否为 900px（例如）以及我的图像是否为不超过 900 像素就会居中吗？

我的意思是如果我的图片大于 900px 则什么都不做（不要居中）但是如果我的图片小于 900px 则将它们居中

让我给你看一下图片

$(document).ready(function(){


    $('.mySlideShow').cycle({
    next: "#single-right",
    pauseOnHover: true,
    pager: "#single-pager",
    pagerTemplate: "<a href='#'><img src='{{src}}' width=48 height=48></a>",
    prev: "#single-left",
  });
  
 
});

.single-gallery{
  width:800px;
 height:640px;
  position:relative;
}
.cycle-slideshow img {
  height:494px;
  width:auto;
}

#single-pager a img {
  width: 49.3px !important;
  height:49.3px !important;
  border: 1px solid #fff;
}

#single-pager a.cycle-pager-active img {
  opacity: 0.4;
}

#single-left,
#single-right {
  position: absolute;
  top: 50%;
  z-index: 1000;
  background: rgba(255, 255, 255, .8);
  padding: 12px;
  cursor: pointer;
}

#single-left {
  left: 0;
}

#single-right {
  right: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.cycle2/2.1.6/jquery.cycle2.min.js"></script>
<div class="single-gallery">
  <div class="mySlideShow">
    <img src="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/golden-wheat-field-lightbox.jpg">
    <img src="https://cdn.pixabay.com/photo/2017/01/07/20/40/candy-1961536_960_720.jpg">
    <img src="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/night-in-the-city-lightbox.jpg">
    <img src="https://cdn.pixabay.com/photo/2017/01/11/11/33/cake-1971552_960_720.jpg">
    <img src="https://www.w3schools.com/w3css/img_avatar3.png">
   
  <div id="single-pager" class="center external"></div>
    
  <div id="single-next-prev">
    <span id="single-left">Prev</span>
    <span id="single-right">Next</span>
  </div>
  </div>

</div>

Answer 1

试试这个代码

    <link href="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/1.3.9/css/lightgallery.min.css" rel="stylesheet" />


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.cycle2/2.1.6/jquery.cycle2.min.js"></script>
<div class="single-gallery">
  <div class="mySlideShow">
    <img src="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/golden-wheat-field-lightbox.jpg">
    <img src="https://cdn.pixabay.com/photo/2017/01/07/20/40/candy-1961536_960_720.jpg">
    <img src="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/night-in-the-city-lightbox.jpg">
    <img src="https://cdn.pixabay.com/photo/2017/01/11/11/33/cake-1971552_960_720.jpg">
    <img src="https://www.w3schools.com/w3css/img_avatar3.png">

  <div id="single-pager" class="center external"></div>

  <div id="single-next-prev">
    <span id="single-left">Prev</span>
    <span id="single-right">Next</span>
  </div>
  </div>

</div>

DEMO

居中幻灯片图像

Centered Slides images

jquery

html

css

cycle