Responsive jQuery slideshow.

responsive-jquery-slideshow.css

.slideshow {
  margin-bottom:20px;
  position:relative;
}

.slideshow__item {
  width:100%;
}

.slideshow__item + .slideshow__item {
  display:none;
}

.slideshow__item.cycle-slide + .slideshow__item.cycle-slide {
  display:block;
}

.slideshow__img {
  display:block;
  margin:0 auto;
}

.slideshow__prev,
.slideshow__next {
  position:absolute;
  top:50%;
  margin-top:-25px;
  width:51px;
  height:50px;
  z-index:999;
  text-indent:-9999px;
  overflow:hidden;
  opacity:.75;
  transition:.5s;
  background-image:url(data:image/png;base64,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);
}

.slideshow__prev {
  left:20px;
}

.slideshow__next {
  right:20px;
  background-position:-51px;
}

.slideshow__prev:hover,
.slideshow__next:hover {
  opacity:1;
}

@media (max-width:767px) {
  .slideshow__prev,
  .slideshow__next {
    display:none;
  }
}

.slideshow__title {
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  background-color:#000;
  background-color:rgba(0,0,0,.7);
  padding:20px;
  color:#FFF;
}

@media (max-width:580px) {
  .slideshow__title {
    display:none;
  }
}

responsive-jquery-slideshow.html

<div class="wrapper">
  <div class="slideshow">
    <div class="cycle-slideshow" data-cycle-slides=".slideshow__item" data-cycle-prev=".slideshow__prev" data-cycle-next=".slideshow__next">
      <div class="slideshow__item">
        <a href="#">
          <img class="slideshow__img" src="http://placehold.it/1200x350">
          <div class="slideshow__title">Title</div>
        </a>
      </div>
    </div>

    <a class="slideshow__prev" href="#">Prev</a>
    <a class="slideshow__next" href="#">Next</a>
  </div>
</div>

responsive-jquery-slideshow.md

Dependencies

• jQuery
• jQuery Cycle2