JSFiddle - React, Tailwind, and code Playground

by kohei horiguchi

HTML

<div id="example2" class="slider-pro">
            <div class="sp-slides">
                <div class="sp-slide">
                    <a href="http://hogeeeeeeeeeeene.com/">
                        <img class="sp-image" src="../src/css/images/ss.gif" />
                    </a>
                    <p class="sp-caption">あいうえお</p>
                </div>
    
                <div class="sp-slide">
                    <a href="http://hogeeeeeeeeeeene.com/">
                        <img class="sp-image" src="../src/css/images/s.jpg" />
                    </a>
                    <p class="sp-caption">cap.</p>
                </div>
            </div>
    </div>

JavaScript

$( document ).ready(function( $ ) {
                $( '#example2' ).sliderPro({
         
                    //sliderproの設定値
                    width: '50%',
                    height: 500,
                    aspectRatio: 1.5,
                    visibleSize: '100%',
                    forceSize: 'fullWidth',
					arrows: true,
					
                });
          
               $( '#example2 .sp-image' ).parent( 'a' ).on( 'click', function( event ) {
//eventにimgが来るから親のAの属性のhrefを拾ってlocation.hrefに入れる
					location.href = event.target.parentNode.getAttribute("href")

                }); 
            });