お世話になっております。
某モールのスマホ用商品ページにスライダーを挿入したく、iframeにてswiper.jsやslick.js等を使用しましたが読み込みでエラーが起き当方では対処できなかったのでcssのみのスライダーを採用しました。
が、メインのイメージにリンクをつけると、イメージはスライドするのですがリンク自体は変わってくれません。
どうにか解決できないでしょうか?
cssがこちら
.slider{ width: 100%; position: relative; padding-top: 44%; margin: 0; text-align: center; /* box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.75);*/ } .slider>img, .slider>a{ position: absolute; left: 0; top: 0; transition: all 0.5s; } .slider a img { width: 100%; } .slider input[name='slide_switch'] { display: none; } .slider label { width: 18%; margin: 1% 0 0 1.7%; border: 3px solid #999; float: left; cursor: pointer; transition: all 0.5s; opacity: 0.6; } .slider label img{ display: block; } .slider input[name='slide_switch']:checked+label { border-color: #666; opacity: 1; } .slider input[name='slide_switch'] ~ a { opacity: 0; transform: scale(1.1); } .slider input[name='slide_switch']:checked+label+a { opacity: 1; transform: scale(1); } </style>
htmlはこちら
<input type="radio" name="slide_switch" id="id1"/> <label for="id1"> <img src="img1.jpg" width="100%"> </label> <a href="#" target="_top"><img src="img1.jpg"></a> <input type="radio" name="slide_switch" id="id2" checked="checked"/> <label for="id2"> <img src="img2.jpg" width="100%"/> </label> <a href="#" target="_top"><img src="img2.jpg"></a> <input type="radio" name="slide_switch" id="id3"/> <label for="id3"> <img src="img3.jpg" width="100%"/> </label> <a href="#" target="_top"><img src="img3.jpg"></a> <input type="radio" name="slide_switch" id="id4"/> <label for="id4"> <img src="img4.jpg" width="100%"/> </label> <a href="#" target="_top"><img src="img4.jpg"/></a> <input type="radio" name="slide_switch" id="id5"/> <label for="id5"> <img src="img5.jpg" width="100%"/> </label> <a href="#" target="_top"><img src="img5.jpg"/></a> </div> コード
どなたかよろしくお願いいたします。。
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/09/14 05:04