css 响应Cycle2图像滑块使用非图像技术与背景图像

Posted 2021-05-13

<div class="cycle-slideshow event-slider" 
  data-cycle-fx="fade" 
  data-cycle-timeout="3000"
  data-cycle-slides="> .slide"
  data-cycle-pause-on-hover="true"
  data-cycle-pager="#pager"
  style="overflow: hidden;">
  
  <div class="slide" style="background: url(<?php bloginfo('template_directory'); ?>/img/p1.jpg) no-repeat center center; -webkit-backround-size: cover; background-size: cover;">
    <p class="overlay">
      <span class="slider-header">Here is some text in an overlay</span>
      <span class="slider-subheader">October 21st</span>
    </p>
    <a class="slider-button" href="#">Learn More</a>
  </div>
  <div class="slide" style="background: url(<?php bloginfo('template_directory'); ?>/img/p2.jpg) no-repeat center center; background-size: cover;">
    <p class="overlay">
      <span class="slider-header">More text in an overlay</span>
      <span class="slider-subheader">November 21st</span>
    </p>
    <a class="slider-button" href="#">Learn More</a>
  </div>
  <div class="slide" style="background: url(<?php bloginfo('template_directory'); ?>/img/p3.jpg) no-repeat center center; background-size: cover;">
    <p class="overlay">
      <span class="slider-header">Some text in an overlay</span>
      <span class="slider-subheader">January 21st</span>
    </p>
    <a class="slider-button" href="#">Learn More</a>
  </div>
  <div class="slide" style="background: url(<?php bloginfo('template_directory'); ?>/img/p4.jpg) no-repeat center center; background-size: cover;">
    <p class="overlay">
      <span class="slider-header">An overlay with text</span>
      <span class="slider-subheader">May 21st</span>
    </p>
    <a class="slider-button" href="#">Learn More</a>
  </div>
  
  <div class="cycle-pager" id="pager"></div>

</div><!-- /event-slider -->

.event-slider .slide {
  height: 256px;
  min-width: 100%;
  width: auto;
} 
.event-slider .overlay {
  position: absolute;
  bottom: 0%;
  height: auto;
  background: rgba(0,0,0,0.5);
  color: #fff;
  padding: 10px;
  display: block;
  width: 100%;
  overflow: hidden;
}
.event-slider .slider-header {
  display: block;
  font-size: 26px;
  text-transform: uppercase;
}
.event-slider .slider-subheader {
  color: darkgoldenrod;
  display: inline-block;
}
.event-slider .slider-button {
  display: inline-block;
  width: auto;
  height: auto;
  background-color: darkgoldenrod;
  text-align: center;
  color: white;
  font-size: 22px;
  padding: 10px 20px;
  position: absolute;
  bottom: 10px;
  right: 20px;
  transition: all 0.4s;
}
.event-slider .slider-button:hover {
  background-color: orange;
}