Как подключить несколько скриптов js?

Question

[Allikxes]

Рабочий:

Не рабочий:


Сделал один свайп слайдер с комментариями, хотел сделать еще один но с карточками продуктов, но что-то ничего не получается, попробовал в новом html файле, все работает.
1Й-СКРИПТ рабочий!

var swiper = new Swiper(".mySwiper", {
  slidesPerView: 1,
  grabCursor: true,
  loop: true,
  pagination: {
    el: ".swiper-pagination",
    clickable: true,
  },
  navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev",
  },
});

Подключение: link rel="stylesheet" href="./css/swiper-bundle.min.css">
(Убрал знак, чтобы хабр не ругался) script src="./js/swiper-bundle.min.js">
script src="./js/script.js">

2-й СКРИПТ не подключается!

var swiper = new Swiper(".swiper-container1", {
	effect: "coverflow",
	grabCursor: true,
	centeredSlides: true,
	slidesPerView: "auto",
	coverflowEffect: {
		rotate: 20,
		stretch: 0,
		depth: 200,
		modifier: 1,
		slideShadows: true,
	},
	loop: true

});

Подключение: link rel="stylesheet" href="https:// cdn.jsdelivr. net /npm/swiper/swiper-bundle.min.css"/>
(Убрал знак, чтобы хабр не ругался) script src="https:// cdn.jsdelivr. net /npm/swiper/swiper-bundle.min.js">
script src="./js/3dswipe.js">

Код ПЕРВОГО СКРИПТА html:

<section class="otzivi">
			<div class="testimonial mySwiper">
				<div class="testi-content swiper-wrapper">
					<div class="slide swiper-slide">
						<img src="./img/1612172175_33-p-internet-marketing-fon-35.png" alt="" class="image" />
						<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat facilis autem expedita accusantium suscipit dignissimos, deserunt quasi quod, recusandae possimus exercitationem aut assumenda dolorem delectus necessitatibus doloremque illo sequi sed.</p>

						<i class='bx bxs-quote-alt-left quote-icon'></i>

						<div class="details">
							<span class="name">dsadasd</span>
							<span class="job">dadasd</span>
						</div>
					</div>
					<div class="slide swiper-slide">
						<img src="./img/DRL-ICA-67214-scaled.jpeg" alt="" class="image" />
						<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat facilis autem expedita accusantium suscipit dignissimos, deserunt quasi quod, recusandae possimus exercitationem aut assumenda dolorem delectus necessitatibus doloremque illo sequi sed.</p>

						<i class='bx bxs-quote-alt-left quote-icon'></i>

						<div class="details">
							<span class="name">dsadasd</span>
							<span class="job">dadasd</span>
						</div>
					</div>
					<div class="slide swiper-slide">
						<img src="./img/transformed_shutterstock_113023720.jpg" alt="" class="image" />
						<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat facilis autem expedita accusantium suscipit dignissimos, deserunt quasi quod, recusandae possimus exercitationem aut assumenda dolorem delectus necessitatibus doloremque illo sequi sed.</p>

						<i class='bx bxs-quote-alt-left quote-icon'></i>

						<div class="details">
							<span class="name">dsadasd</span>
							<span class="job">dadasd</span>
						</div>
					</div>
					<div class="slide swiper-slide">
						<img src="./img/3.jpg" alt="" class="image" />
						<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat facilis autem expedita accusantium suscipit dignissimos, deserunt quasi quod, recusandae possimus exercitationem aut assumenda dolorem delectus necessitatibus doloremque illo sequi sed.</p>

						<i class='bx bxs-quote-alt-left quote-icon'></i>

						<div class="details">
							<span class="name">dsadasd</span>
							<span class="job">dadasd</span>
						</div>
					</div>
				</div>
				<div class="swiper-button-next nav-btn1" id="right"></div>
      	<div class="swiper-button-prev nav-btn1" id="left"></div>
      	<div class="swiper-pagination"></div>
			</div>
		</section>

КОД ВТОРОГО СКРИПТА HTML:

<section class="shop">
	<div class="gallery swiper-container1">
		<div class="gallery_list swiper-wrapper1">
			<div class="gallery_item swiper-slide1">
				<img src="./img/1612172175_33-p-internet-marketing-fon-35.png" alt="">
				<div class="textgallery">
					<h3 class="titlegallery">YFpdfdfs</h3>
					<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius beatae error inventore, adipisci natus molestiae!</p>
					<a href="#">Gjcjjdsc</a>
				</div>
			</div>
			<div class="gallery_item swiper-slide1">
				<img src="./img/1663606.jpg" alt="">
				<div class="textgallery">
					<h3 class="titlegallery">YFpdfdfs</h3>
					<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius beatae error inventore, adipisci natus molestiae!</p>
					<a href="#">Gjcjjdsc</a>
				</div>
			</div>
			<div class="gallery_item swiper-slide1">
				<img src="./img/DRL-ICA-67214-scaled.jpeg" alt="">
				<div class="textgallery">
					<h3 class="titlegallery">YFpdfdfs</h3>
					<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius beatae error inventore, adipisci natus molestiae!</p>
					<a href="#">Gjcjjdsc</a>
				</div>
			</div>
			<div class="gallery_item swiper-slide1">
				<img src="./img/transformed_shutterstock_113023720.jpg" alt="">
				<div class="textgallery">
					<h3 class="titlegallery">YFpdfdfs</h3>
					<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius beatae error inventore, adipisci natus molestiae!</p>
					<a href="#">Gjcjjdsc</a>
				</div>
			</div>
		</div>
	</div>
	<script src="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.js"></script>
  <script src="./js/3dswipe.js"></script>
</section>

Comments

[Виталий Першин]

Тут все сложно. Давайте зайдем с другой стороны, чтобы у вас включилось логическое мышление. Скопируйте полностью html разметку otzivi и в ней вместо mySwiper напишите mySwiper2. js тоже копируем и вписываем mySwiper2 только вот это var swiper = вообще убрать.

И не надо 2 раза подключать swiper! Вот это убираем:

<script src="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.js"></script>
  <script src="./js/3dswipe.js"></script>

Возможно после этого вы начнете понимать что вы делаете

[Allikxes]

Виталий Першин, Это два разных свайпера взятых с swiperjs, поэтому и подключал его, скрипты поместил в два разных js документа, первый скрипт с секции "otzivi" исправно работает, но при подключении второго появляются проблемы, с названием классов игрался уже, тоже думал, что где-то конфликт скриптов из-за названий, но нет. Я в этой сфере всего неделю, взялся за крупную работу и изучаю все понемногу, но пока что возникают проблемы, над которыми я могу тратить не один час.

[Виталий Першин]

Allikxes, Что в вашем понимании разные?

Я в этой сфере всего неделю

Поэтому сделайте как я вам говорю. Я вам показываю путь к пониманию, а не даю решение. На ваш вопрос скорее всего никто не ответит, потому что вы все делаете неправильно и то что вы в этом неделю можно и так понять по вашим примерам.

[Павел]

Allikxes, Как вариант, откройте консоль браузера, может ошибка, указанная там вам поможет...

[Nisen]

может в самом js название переменных слайдеров разное. а так два раза var swiper..