居中幻灯片图片

Question

我使用Cycle2轮播插件我的所有图像宽度都不同，这就是为什么我想让我的图像居中但有一些东西我想知道如果我的父包装宽度是900px（例如）和如果我的图像不是900px而不是居中？

我的意思是如果我的图像大于9​​00px而不是什么都不做（不要居中）但是如果我的图像小于900px而不是居中它们

让我告诉你图片

＆＃13;

＆＃13;

$(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",
  });
  
 
});

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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