<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Index</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.15/jquery.bxslider.min.css" />
<link href='bx.css' rel='stylesheet'>
<style>
</style>
</head>
<body>
<main id='bx-core0' class='bx-core'>
<nav class="bx-pager">
<a data-slide-index="0" href="#/" class='active'>
<img src="https://placeimg.com/200/200/people/0" width="50" /></a>
<a data-slide-index="1" href="#/">
<img src="https://placeimg.com/200/200/people/1" width="50" /></a>
<a data-slide-index="2" href="#/">
<img src="https://placeimg.com/200/200/people/2" width="50" /></a>
<a data-slide-index="3" href="#/">
<img src="https://placeimg.com/200/200/people/3" width="50" /></a>
<a data-slide-index="4" href="#/">
<img src="https://placeimg.com/200/200/people/4" width="50" /></a>
</nav>
<ul class="bx-slider">
<li>
<img src="https://placeimg.com/200/200/people/0" />
</li>
<li>
<img src="https://placeimg.com/200/200/people/1" />
</li>
<li>
<img src="https://placeimg.com/200/200/people/2" />
</li>
<li>
<img src="https://placeimg.com/200/200/people/3" />
</li>
<li>
<img src="https://placeimg.com/200/200/people/4" />
</li>
</ul>
<nav class='bx-linx'>
<a data-slide-index="0" href="index.html">🄌</a>
<a data-slide-index="1" href="page1.html">➊</a>
<a data-slide-index="2" href="page2.html">➋</a>
<a data-slide-index="3" href="page3.html">➌</a>
<a data-slide-index="4" href="page4.html">➍</a>
</nav>
<h1>Index</h1>
</main>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.15/jquery.bxslider.min.js"></script>
<script>
const cfgA = {
pagerCustom: '.bx-pager',
onSlideBefore: bxMove
};
const cfgB = {
controls: false,
pager: false,
onSlideBefore: bxMove
};
const bx = $('.bx-slider').bxSlider(cfgA);
const lx = $('.bx-linx').bxSlider(cfgB);
function bxMove($ele, from, to) {
bx.goToSlide(to);
lx.goToSlide(to);
$('.bx-core a').removeClass('active');
$('.bx-pager a').eq(to).addClass('active');
}
</script>
</body>
</html>
/* bxJump.css */
html,
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
font: 400 16px/1.3 Consolas;
}
.bx-wrapper {
margin-bottom: 1em;
}
.bx-core img {
display: block;
margin: 0 auto;
}
.bx-core a,
.bx-core a:link,
.bx-core a:visited {
display: table-cell;
text-decoration: none;
font-size: 3em;
color: #00c;
}
.bx-core a:hover,
.bx-core a:active {
outline: 3px ridge cyan;
}
.bx-pager a.active {
outline: 3px ridge tomato;
}
.bx-linx a.active + a {
color: tomato;
}
.bx-pager,
.bx-linx {
display: table;
margin: 0 auto .75em;
text-align: center;
}
.bx-linx {
width: 150px;
}
h1 {
font-size: 3.5rem;
text-align:center;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Page 1</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.15/jquery.bxslider.min.css" />
<link href='bx.css' rel='stylesheet'>
<style>
</style>
</head>
<body>
<main id='bx-core1' class='bx-core'>
<nav class="bx-pager">
<a data-slide-index="0" href="#/" class='active'>
<img src="https://placeimg.com/200/200/people/5" width="50" /></a>
<a data-slide-index="1" href="#/">
<img src="https://placeimg.com/200/200/people/6" width="50" /></a>
<a data-slide-index="2" href="#/">
<img src="https://placeimg.com/200/200/people/7" width="50" /></a>
<a data-slide-index="3" href="#/">
<img src="https://placeimg.com/200/200/people/8" width="50" /></a>
<a data-slide-index="4" href="#/">
<img src="https://placeimg.com/200/200/people/9" width="50" /></a>
</nav>
<ul class="bx-slider">
<li>
<img src="https://placeimg.com/200/200/people/5" />
</li>
<li>
<img src="https://placeimg.com/200/200/people/6" />
</li>
<li>
<img src="https://placeimg.com/200/200/people/7" />
</li>
<li>
<img src="https://placeimg.com/200/200/people/8" />
</li>
<li>
<img src="https://placeimg.com/200/200/people/9" />
</li>
</ul>
<nav class='bx-linx'>
<a data-slide-index="0" href="index.html">🄌</a>
<a data-slide-index="1" href="page1.html">➊</a>
<a data-slide-index="2" href="page2.html">➋</a>
<a data-slide-index="3" href="page3.html">➌</a>
<a data-slide-index="4" href="page4.html">➍</a>
</nav>
<h1>Page 1</h1>
</main>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.15/jquery.bxslider.min.js"></script>
<script>
const cfgA = {
startSlide: 1,
pagerCustom: '.bx-pager',
onSlideBefore: bxMove
};
const cfgB = {
startSlide: 1,
controls: false,
pager: false,
onSlideBefore: bxMove
};
const bx = $('.bx-slider').bxSlider(cfgA);
const lx = $('.bx-linx').bxSlider(cfgB);
function bxMove($ele, from, to) {
bx.goToSlide(to);
lx.goToSlide(to);
$('.bx-core a').removeClass('active');
$('.bx-pager a').eq(to).addClass('active');
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Page 2</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.15/jquery.bxslider.min.css" />
<link href='bx.css' rel='stylesheet'>
<style>
</style>
</head>
<body>
<main id='bx-core2' class='bx-core'>
<nav class="bx-pager">
<a data-slide-index="0" href="#/" class='active'>
<img src="https://placeimg.com/200/200/people/10" width="50" /></a>
<a data-slide-index="1" href="#/">
<img src="https://placeimg.com/200/200/people/11" width="50" /></a>
<a data-slide-index="2" href="#/">
<img src="https://placeimg.com/200/200/people/12" width="50" /></a>
<a data-slide-index="3" href="#/">
<img src="https://placeimg.com/200/200/people/13" width="50" /></a>
<a data-slide-index="4" href="#/">
<img src="https://placeimg.com/200/200/people/14" width="50" /></a>
</nav>
<ul class="bx-slider">
<li>
<img src="https://placeimg.com/200/200/people/10" />
</li>
<li>
<img src="https://placeimg.com/200/200/people/11" />
</li>
<li>
<img src="https://placeimg.com/200/200/people/12" />
</li>
<li>
<img src="https://placeimg.com/200/200/people/13" />
</li>
<li>
<img src="https://placeimg.com/200/200/people/14" />
</li>
</ul>
<nav class='bx-linx'>
<a data-slide-index="0" href="index.html">🄌</a>
<a data-slide-index="1" href="page1.html">➊</a>
<a data-slide-index="2" href="page2.html">➋</a>
<a data-slide-index="3" href="page3.html">➌</a>
<a data-slide-index="4" href="page4.html">➍</a>
</nav>
<h1>Page 2</h1>
</main>
<script>
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.15/jquery.bxslider.min.js"></script>
<script>
const cfgA = {
startSlide: 2,
pagerCustom: '.bx-pager',
onSlideBefore: bxMove
};
const cfgB = {
startSlide: 2,
controls: false,
pager: false,
onSlideBefore: bxMove
};
const bx = $('.bx-slider').bxSlider(cfgA);
const lx = $('.bx-linx').bxSlider(cfgB);
function bxMove($ele, from, to) {
bx.goToSlide(to);
lx.goToSlide(to);
$('.bx-core a').removeClass('active');
$('.bx-pager a').eq(to).addClass('active');
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Page 2</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.15/jquery.bxslider.min.css" />
<link href='bx.css' rel='stylesheet'>
<style>
</style>
</head>
<body>
<main id='bx-core2' class='bx-core'>
<nav class="bx-pager">
<a data-slide-index="0" href="#/" class='active'>
<img src="https://placeimg.com/200/200/people/15" width="50" /></a>
<a data-slide-index="1" href="#/">
<img src="https://placeimg.com/200/200/people/16" width="50" /></a>
<a data-slide-index="2" href="#/">
<img src="https://placeimg.com/200/200/people/17" width="50" /></a>
<a data-slide-index="3" href="#/">
<img src="https://placeimg.com/200/200/people/18" width="50" /></a>
<a data-slide-index="4" href="#/">
<img src="https://placeimg.com/200/200/people/19" width="50" /></a>
</nav>
<ul class="bx-slider">
<li>
<img src="https://placeimg.com/200/200/people/15" />
</li>
<li>
<img src="https://placeimg.com/200/200/people/16" />
</li>
<li>
<img src="https://placeimg.com/200/200/people/17" />
</li>
<li>
<img src="https://placeimg.com/200/200/people/18" />
</li>
<li>
<img src="https://placeimg.com/200/200/people/19" />
</li>
</ul>
<nav class='bx-linx'>
<a data-slide-index="0" href="index.html">🄌</a>
<a data-slide-index="1" href="page1.html">➊</a>
<a data-slide-index="2" href="page2.html">➋</a>
<a data-slide-index="3" href="page3.html">➌</a>
<a data-slide-index="4" href="page4.html">➍</a>
</nav>
<h1>Page 3</h1>
</main>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.15/jquery.bxslider.min.js"></script>
<script>
const cfgA = {
startSlide: 3,
pagerCustom: '.bx-pager',
onSlideBefore: bxMove
};
const cfgB = {
startSlide: 3,
controls: false,
pager: false,
onSlideBefore: bxMove
};
const bx = $('.bx-slider').bxSlider(cfgA);
const lx = $('.bx-linx').bxSlider(cfgB);
function bxMove($ele, from, to) {
bx.goToSlide(to);
lx.goToSlide(to);
$('.bx-core a').removeClass('active');
$('.bx-pager a').eq(to).addClass('active');
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Page 2</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.15/jquery.bxslider.min.css" />
<link href='bx.css' rel='stylesheet'>
<style>
</style>
</head>
<body>
<main id='bx-core2' class='bx-core'>
<nav class="bx-pager">
<a data-slide-index="0" href="#/" class='active'>
<img src="https://placeimg.com/200/200/people/20" width="50" /></a>
<a data-slide-index="1" href="#/">
<img src="https://placeimg.com/200/200/people/21" width="50" /></a>
<a data-slide-index="2" href="#/">
<img src="https://placeimg.com/200/200/people/22" width="50" /></a>
<a data-slide-index="3" href="#/">
<img src="https://placeimg.com/200/200/people/23" width="50" /></a>
<a data-slide-index="4" href="#/">
<img src="https://placeimg.com/200/200/people/24" width="50" /></a>
</nav>
<ul class="bx-slider">
<li>
<img src="https://placeimg.com/200/200/people/20" />
</li>
<li>
<img src="https://placeimg.com/200/200/people/21" />
</li>
<li>
<img src="https://placeimg.com/200/200/people/22" />
</li>
<li>
<img src="https://placeimg.com/200/200/people/23" />
</li>
<li>
<img src="https://placeimg.com/200/200/people/24" />
</li>
</ul>
<nav class='bx-linx'>
<a data-slide-index="0" href="index.html">🄌</a>
<a data-slide-index="1" href="page1.html">➊</a>
<a data-slide-index="2" href="page2.html">➋</a>
<a data-slide-index="3" href="page3.html">➌</a>
<a data-slide-index="4" href="page4.html">➍</a>
</nav>
<h1>Page 4</h1>
</main>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.15/jquery.bxslider.min.js"></script>
<script>
const cfgA = {
startSlide: 4,
pagerCustom: '.bx-pager',
onSlideBefore: bxMove
};
const cfgB = {
startSlide: 4,
controls: false,
pager: false,
onSlideBefore: bxMove
};
const bx = $('.bx-slider').bxSlider(cfgA);
const lx = $('.bx-linx').bxSlider(cfgB);
function bxMove($ele, from, to) {
bx.goToSlide(to);
lx.goToSlide(to);
$('.bx-core a').removeClass('active');
$('.bx-pager a').eq(to).addClass('active');
}
</script>
</body>
</html>