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

Question

[Денис Суворов]

Есть конструкция

<section id="popup1" class="pop-up-window">
	<div class="pop-up_WA">
		<div class="pop-up-hedline_one">рисунок «багряное золото»</div>
        <div class="overflow-scroll">
            <div class="c-toggles">
    			<div class="form_radiobutton">
    				<input name="toggles1" id="rb11" type="radio"  mark="11" value="галерея изделия" checked="checked">
    				<label for="rb11">галерея изделия</label>		
    			</div>
    
    			<div class="form_radiobutton">
    				<input name="toggles1" id="rb12" type="radio"  mark="12" value="персонализация упаковки">
    				<label for="rb12">персонализация упаковки</label>	
    			</div>
    
    			<div class="form_radiobutton">
    				<input name="toggles1" id="rb13" type="radio"  mark="13" value="варианты подарочного набора">
    				<label for="rb13">варианты подарочного набора</label>	
    			</div>
    		</div>
        </div>
		

		<div class="block-tab-1" id="block-11" style="display: block;">
			<div class="container">
				<div class="owl-carousel slider-gallery">
					<div class="slide-item-galery">
						<img src="https://portal.illan.ru/landing/Farfor_cups/Photo/Red_cup_1.jpg">
					</div>
					<div class="slide-item-galery">
						<img src="https://portal.illan.ru/landing/Farfor_cups/Photo/Red_cup_1-2.jpg">
					</div>
					<div class="slide-item-galery">
						<img src="https://portal.illan.ru/landing/Farfor_cups/Photo/Red_cup_1-3.jpg">
					</div>
				</div>
			</div>
		</div>

		<div class="block-tab-1" id="block-12" style="display: none;">
			<div class="container">
				<p class="slider-text galery">Вы можете выбрать вариант адаптации упаковки под свой фирменный стиль</p>
				<div class="owl-carousel slider-gallery">
					<div class="slide-item-galery">
						<img src="https://portal.illan.ru/landing/Farfor_cups/Photo/Upakovka-bagryan_zoloto_1.jpg">
					</div>
					<div class="slide-item-galery">
						<img src="https://portal.illan.ru/landing/Farfor_cups/Photo/Upakovka-bagryan_zoloto_1-2.jpg">
					</div>
				</div>
			</div>
		</div>

		<div class="block-tab-1" id="block-13" style="display: none;">
			<div class="container">
				<p class="slider-text galery">Вы можете выбрать вариант адаптации упаковки под свой фирменный стиль</p>
				<div class="owl-carousel slider-gallery">
					<div class="slide-item-galery">
						<img src="https://portal.illan.ru/landing/Farfor_cups/Photo/Slider-variant-1.jpg">
					</div>
					<div class="slide-item-galery">
						<img src="https://portal.illan.ru/landing/Farfor_cups/Photo/Slider-variant-2.jpg">
					</div>
					<div class="slide-item-galery">
						<img src="https://portal.illan.ru/landing/Farfor_cups/Photo/Slider-variant-3.jpg">
					</div>
				</div>
			</div>
		</div>
		<div class="elemet-space-beetwen">
    	    <a class="item-link close-pop_up">На главную</a>
    	    <a href="#form-link" class="item-link close-pop_up">Заказать коллекцию</a>
	    </div>
	</div>
</section>

	section.pop-up-window {
		width: 100%;
		height: 100vh;
		background-color: #fff;
	}

	.pop-up_WA {
		width: 100%;
		max-width: 1460px;
		margin: 0 auto;
		box-sizing: border-box;
		padding: 10px;
		overflow: hidden;
	}
	
	 .overflow-scroll {
	    width: 100%;		                        
	}
	
	
	
	.elemet-space-beetwen {
	    width: 100%;
	    display: flex;
	    flex-direction: row;
	    justify-content: space-between;
	    align-items: center;
	    flex-wrap: wrap;
	    margin-top: 80px;
	}
	
	.elemet-space-beetwen .item-link {
		position: relative;
		font-family: 'Halvar', sans-serif;
		font-style: normal;
		font-weight: 300;
		font-size: 20px;
		line-height: 110%;
		/* or 22px */
		color: #000000;
		text-decoration: none;
		text-transform: uppercase;
		margin-bottom: 20px;
		cursor: pointer;
		
		}
		
	.elemet-space-beetwen .item-link:after {
		display: block;
	    position: absolute;
	    right: 0;
	    width: 100%;
	    height: 1px;
	    background-color: #000;
	    content: "";
	    transition: all 0.2s ease-out;
	}

	.elemet-space-beetwen .item-link:hover:after {
		width: 0%;
		position: absolute;
	}


	.pop-up-hedline_one {
		font-family: 'Halvar', sans-serif;
		width: 100%;
		max-width: 1070px;
		font-size: 130px;
		line-height: 100%;
		font-style: normal;
		font-weight: 500;
		margin: 0 auto;
		margin-bottom: 100px;
		color: #000;
		text-transform: uppercase;
		text-align: center;
	}

	.c-toggles {
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: flex-end;
		margin: 0 auto;
		margin-bottom: 15px;
	}

	.c-toggles .form_radiobutton input[type=radio] {
	display: none;
}

	.c-toggles .form_radiobutton label {
	font-family: 'Halvar', sans-serif;
	font-size: 14px;
	font-style: normal;
	font-weight: 300;
	width: 100%;
	border-bottom: 1px solid #DEDEDE;
	padding: 0px 0px 20px 0px;
	display: inline-block;
	font-size: 14px;
	cursor: pointer;

}


	.c-toggles .form_radiobutton input[type=radio]:checked + label {
	border-bottom: 1px solid #000;
	color: #000;
}

	.form_radiobutton {
		width: 35%;
		text-align: center;
		text-transform: uppercase;
	}

	.block-tab-1 {
		width: 100%;
		margin: 0 auto;
	}



	@media screen and (max-width: 1440px) {
		.pop-up-hedline_one {
		max-width: 476px;
		font-size: 72px;
		margin-bottom: 100px;
		}
	}

	@media screen and (max-width: 480px) {
		.pop-up-hedline_one {
		max-width: 390px;
		font-size: 36px;
		margin-bottom: 32px;
		}
	}





	/* SLIDER-GALERY */

	.slider-galery {
			width: 100%;
			margin-bottom: 0px !important;
			padding-bottom: 100px;
		}

	.container {
		width: 100%;
		position: relative;
	}

	p.slider-text {
		position: absolute;
		margin: 0;
		padding: 0;
		font-family: 'Halvar', sans-serif;
		font-style: normal;
		font-weight: 300;
		font-size: 24px;
		line-height: 110%;
		/* or 22px */
		color: #000;
		top: 0;
		left: 0;
		max-width: 420px;
		z-index: 999;
		display: none;
		}	

		.slide-item-galery {
			width: 100%;
			height: auto;a
			margin: 0 auto;
		}

		.slide-item-galery img {
			width: 100%;
			height: auto;
			margin: 0 auto;
		}

		.owl-nav {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			position: absolute;
			width: 100%;
			top: 50%;
}

		.owl-nav .owl-next {
			outline: none;
			width: 100px;
			height: 100px;
			transition: all 0.1s ease-in-out;
			border: 1px solid #000 !important;
			border-radius: 50%;
		}

		.owl-nav .owl-next.disabled {
			border: 1px solid #dedede !important;
			cursor: default !important;
		}

		.owl-nav .owl-next span {
			content: url("https://portal.illan.ru/landing/Farfor_cups/Photo/Slider-arrow.svg");
		}

		.owl-nav .owl-prev {
			outline: none;
			width: 100px;
			height: 100px;
			transition: all 0.1s ease-in-out;
			border: 1px solid #000 !important;
			border-radius: 50%;
		}

		.owl-nav .owl-prev.disabled {
			border: 1px solid #dedede !important;
			cursor: default !important;
		}

		.owl-nav .owl-prev span {
			content: url("https://portal.illan.ru/landing/Farfor_cups/Photo/Slider-arrow.svg");
			transform: scale(-1, 1);
		}


  		$('input[name="toggles1"]').click(function(){
	   			var target = $('#block-' + $(this).attr('mark'));
	   			$('.block-tab-1').not(target).hide(0);
	   			target.fadeIn(200);
	   		});
		</script>

		<script>
			$(document).ready(function(){
				  $(".owl-carousel").owlCarousel({
				  	items:1,
				  	center: true,
				  	nav : true,
				  	
				})
			});

Как сделать так, чтобы если слайд конечный, при попытке нажать (перейти) к следующему слайду, пользователь попадал на следующий таб?

Comments

[mahmudchon]

У owl carousel есть параметр loop, используя который можно сделать зацикливание. Мб это вам подойдет?

[Вадим]

Ну, логично что нужно отслеживать нажатие на слайдах, если он последний - вызывать переключение табов.

[Денис Суворов]

mahmudchon, мне нужно, чтобы не зацикливался слайдер, а наоборот по окончанию слайдов в первом слайдере, переключался на другой

[Денис Суворов]

Вадим, Не подскажешь в какую сторону копать, чтобы написать функцию отслеживания, логику я понимаю, что необходимо отследить и если закончились слайды, выполнить переключение

[Вадим]

Денис Суворов, копать в сторону чтения документации.
Например, раздел "Events" - события.

У этой карусели есть событие 'next' - которое происходит при смене слайда на следующий.
Вам в своём коде стоит подписаться на это событие, посмотреть что приходит в функцию обработчик и там уже дальше решить как реализовать данную логику.

Если в функцию обработчик приходит текущий слайд и следующий слайд, или есть информация о позиции следующего слайда в общем массиве - то отлично, смотрит последний ли он, если да, то програмно переключаем вкладку, если такой информации нет, то предварительно найдя все слайды данного таба находим позицию текущего слайда в этом массиве, если он последний, то програмно переключаем таб.