我们可以基于缩略图列表中的点击使用swiper打开模式吗？ ..需要在“滑动包装器”和“滑动滑动器”容器中的每个容器
我知道这可能不是插件的“正常”使用，但是必须解决这种有问题的插件！
我尝试做这样的事情：https://codepen.io/llbull/pen/ejzJOm
HTML
<div id="myprojets">
<div class="swiper-container projets " >
<div class="swiper-wrapper">
<div class="swiper-slide" data-hash="GROUP-IGT">
<div class="gallery_item_full">
<div class="box" > <img src="https://www.neopanacea.fr/images/large/igt_1.png" alt="">
<h3>GROUP-IGT</h3>
<p>Intégration du site institutionnel du groupe IGT proposant des solutions de projets d'étude et de rénovation dans le bâtiment.<br>
Le site a été intégrer de manière responsive de telle manière qu'il puisse s'afficher sur tous les supports connectés.</p>
</div>
</div>
</div>
<div class="swiper-slide" data-hash="ELCOBRANDT">
<div class="gallery_item_full">
<div class="box"> <img src="https://www.neopanacea.fr/images/large/elco_t_1.png" alt="">
<h3>ELCOBRANDT</h3>
<p>Conception graphique/ intégration des 5 sites du groupe dans le respect des chartes existantes : Brandt, Sauter, Thomson, DeDietrich et Vedette</p>
</div>
</div>
</div>
<div class="swiper-slide" data-hash="NOKIA">
<div class="gallery_item_full">
<div class="box"> <img src="https://www.neopanacea.fr/images/large/nokia.png" alt="">
<h3>NOKIA</h3>
<p>Conception graphique/ intégration d'un cd-rom Flash lors de la sortie du modèle 5310. Descriptif produit et posibilité de télécharger vidéo et images concernant le produit et son association pour l'occasion au chanteur rap Will I Am des Black Eyed Peas.</p>
</div>
</div>
</div>
<div class="swiper-slide" data-hash="CITROËN">
<div class="gallery_item_full">
<div class="box"> <img src="https://www.neopanacea.fr/images/large/citroen_loca.png" alt="">
<h3>CITROËN</h3>
<p>Un Quizz intéractif a ici été réalisé lors du lancement du service de géolocalisation mis en place par Citroen</p>
</div>
</div>
</div>
<div class="swiper-slide" data-hash="GROUPE-ESSIA">
<div class="gallery_item_full">
<div class="box"> <img src="https://www.neopanacea.fr/images/large/essia_2.png" alt="">
<h3>GROUPE ESSIA</h3>
<p>Conception de la charte graphique accompagnée de la déclinaison papeterie pour ce groupe spécialisé dans le regroupement de société d'HLM en Essonne</p>
</div>
</div>
</div>
<div class="swiper-slide" data-hash="INSERM">
<div class="gallery_item_full">
<div class="box"> <img src="https://www.neopanacea.fr/images/large/inserm_3.png" alt="">
<h3>INSERM</h3>
<p>Conception graphique/ intégration de la ligne graphique des sites régionnaux, plus respectueuse de la charte graphique du site national.</p>
</div>
</div>
</div>
<div class="swiper-slide" data-hash="MINVASYS">
<div class="gallery_item_full">
<div class="box"> <img src="https://www.neopanacea.fr/images/large/minvasys_1.png" alt="">
<h3>MINVASYS</h3>
<p>Conception graphique/ intégration du site de cette société experte dans la chirurgie cardio-vasculaire. Des prestations print chemises et plaquettes auront été également fournies pour l'occasion de la sorties de nouveaux produits.</p>
</div>
</div>
</div>
<div class="swiper-slide" data-hash="LE-MANÈGE-À-BIJOUX">
<div class="gallery_item_full">
<div class="box"> <img src="https://www.neopanacea.fr/images/large/manege_1.png" alt="">
<h3>LE MANÈGE À BIJOUX</h3>
<p>Conception graphique/ intégration du site de e-commerce spécialisé dans l'orfèvrerie accessible à tous du groupe E.Leclerc</p>
</div>
</div>
</div>
<div class="swiper-slide" data-hash="MAIRIE-DE-PARIS">
<div class="gallery_item_full">
<div class="box"> <img src="https://www.neopanacea.fr/images/large/mp_b08_1.png" alt="">
<h3>MAIRIE DE PARIS</h3>
<p>Conception graphique/ intégration Flash des trois cédéroms permettant l'accès aux élus à tous les chiffres des projets de budgets primitifs, budgets primitifs et comptes administratifs de la ville et du département de Paris</p>
</div>
</div>
</div>
</div>
<a href="#" class="cl"><</a>
<!-- Add Arrows -->
<div class="swiper-button-next swiper-button-white"></div>
<div class="swiper-button-prev swiper-button-white"></div>
</div>
</div>
<div id="projets-thumbs" class="container">
<div class="swiper-wrapper">
<div class="swiper-slide" data-slider="1"> <a> <img src="https://www.neopanacea.fr/images/large/igt_1.png" alt="GROUP IGT">
<div class="lehover"><span>
<h3>GROUP IGT</h3>
</span></div>
</a> </div>
<div class="swiper-slide" data-slider="2"> <a> <img src="https://www.neopanacea.fr/images/large/elco_t_1.png" alt="ELCOBRANDT">
<div class="lehover"><span>
<h3>ELCOBRANDT</h3>
</span></div>
</a> </div>
<div class="swiper-slide" data-slider="3"> <a> <img src="https://www.neopanacea.fr/images/large/nokia.png" alt="NOKIA">
<div class="lehover"><span>
<h3>NOKIA</h3>
</span></div>
</a> </div>
<div class="swiper-slide" data-slider="4"> <a> <img src="https://www.neopanacea.fr/images/large/citroen_loca.png" alt="CITROËN">
<div class="lehover"><span>
<h3>CITROËN</h3>
</span></div>
</a> </div>
<div class="swiper-slide" data-slider="5"> <a> <img src="https://www.neopanacea.fr/images/large/essia_2.png" alt="GROUPE ESSIA">
<div class="lehover"><span>
<h3>GROUPE ESSIA</h3>
</span></div>
</a> </div>
<div class="swiper-slide" data-slider="6"> <a> <img src="https://www.neopanacea.fr/images/large/inserm_3.png" alt="INSERM">
<div class="lehover"><span>
<h3>INSERM</h3>
</span></div>
</a> </div>
<div class="swiper-slide" data-slider="7"> <a> <img src="https://www.neopanacea.fr/images/large/minvasys_1.png" alt="MINVASYS">
<div class="lehover"><span>
<h3>MINVASYS</h3>
</span></div>
</a> </div>
<div class="swiper-slide" data-slider="8"> <a> <img src="https://www.neopanacea.fr/images/large/manege_1.png" alt="LE MANÈGE À BIJOUX">
<div class="lehover"><span>
<h3>LE MANÈGE À BIJOUX</h3>
</span></div>
</a> </div>
<div class="swiper-slide" data-slider="9"><a > <img src="https://www.neopanacea.fr/images/large/mp_b08_1.png" alt="MAIRIE DE PARIS">
<div class="lehover"><span>
<h3>MAIRIE DE PARIS</h3>
</span></div>
</a> </div>
</div>
</div>
JS
<script src="https://code.jquery.com/jquery-2.2.4.min.js" type="text/javascript"></script>
<script src="../dist/js/swiper.min.js"></script>
<script>
$(document).ready(function () {
var galleryTop = new Swiper('.projets', {
watchSlidesProgress: true,
spaceBetween: 0,
uniqueNavElements: false,
slidesPerView: 'auto',
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});
var galleryThumbs = new Swiper('#projets-thumbs ', {
slideToClickedSlide: true,
slidesPerView: 3,
slidesPerColumn: 3,
spaceBetween: 0,
breakpoints: {
400: {
slidesPerView: 1,
slidesPerColumn: 9
},
800: {
slidesPerView: 2,
slidesPerColumn: 5
},
1200: {
slidesPerView: 3,
slidesPerColumn: 3
}
}
});
galleryTop.controller.control = galleryThumbs;
galleryThumbs.controller.control = galleryTop;
var $modal = $('#myprojets');
$modal.bind('webkitAnimationEnd oanimationend msAnimationEnd animationend', function(e) {
if ($modal.hasClass('close')) {
$modal.removeClass('close');
e.preventDefault();
}
});
$('.cl').on('click', function(ev) {
$modal.removeAttr('class').addClass('close');
ev.preventDefault();
});
$('#projets-thumbs .swiper-slide').on('click', function(er) {
if ($modal.hasClass('modalActive')) {
$modal.removeAttr('class').addClass('close');
} else {
$modal.removeAttr('class').addClass('modalActive');
}
er.preventDefault();
});
});
</script>
但是任何帮助将不胜感激;）