JSFiddle - React, Tailwind, and code Playground

by liquilife

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/prashantchaudhary/ddslick/master/jquery.ddslick.min.js"></script>
<script src="https://malsup.github.io/min/jquery.cycle2.min.js"></script>
<div class="left">
  <div class="cycle-slideshow" data-cycle-fx="fade" data-cycle-timeout="0" data-cycle-slides="> div" data-cycle-prev="#prev" data-cycle-next="#next">
      <div data-cycle-hash="one" class="watch">
          <img src="https://unsplash.it/g/200/300" />
          <p>1</p>
      </div>
      <div data-cycle-hash="two" class="watch">
          <img src="https://unsplash.it/200/300" />
          <p>2</p>
      </div>
      <div data-cycle-hash="three" class="watch">
          <img src="https://unsplash.it/200/300/?blur" />
          <p>3</p>
      </div>
      <span id="prev">Previous</span>
      <span id="next">Next</span>
      <span class="cycle-pager"></span>
  </div>
</div>

<div class="right">
  <select id="selectOptions" class="color" name="color">
    <option class="one">One</option>
    <option class="two">Two</option>
    <option class="three">Three</option>
  </select>
  <select id="selectOptions2" class="color2" name="color2">
    <option class="one">One</option>
    <option class="two">Two</option>
    <option class="three">Three</option>
  </select>
</div>

CSS

.cycle-slideshow p { position:absolute; top: 10px; right: 10px; font-size: 30px; margin:0; }
#prev, #next { cursor: pointer; padding-right:10px; }
.cycle-pager { display:block;}
.cycle-pager span { font-size: 40px; padding-right:10px;cursor:pointer; }
.cycle-pager-active { color: green; }
.left, .right { float: left; width: 49%;}
.right { margin-top: 20px; }

JavaScript

// Initiate DDSlick 
$('.color').ddslick();

  // Update DDSlick to match an option item with a class which matches the current hashtag appended to the URL. Hashtag will be updated as user uses the prev or next buttons as well as the pager dots
  
$( ".cycle-pager span, #prev, #next" ).click(function() {
        var link = $('.cycle-slide-active').attr('data-cycle-hash');
        var hash = link.substring(link.indexOf('#')+1);
        $('#selectOptions2 option').removeAttr('selected');
        $('#selectOptions2 .'+hash).attr('selected',true);
});

// Update hashtag on URL to match the class of the option item manually selected by the user