Slider Pro в css табах

128
06 августа 2019, 22:00
Нашел замечательный слайдер "Slider Pro" но не удается поместить его в css табы в первом табе слайдер отображается хорошо, а вот в последующих табах при переключение уже работает некорректно. Подскажите пожалуйста как можно исправить чтобы в табах отображался корректно?
Код такой
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Slider Pro</title>
<link rel="stylesheet" type="text/css" href="http://bqworks.com/slider-pro/css/slider-pro.min.css" media="screen"/>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,600' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="http://bqworks.com/slider-pro/js/jquery.sliderPro.min.js"></script>

<style type="text/css">
.target:not(:target),
:target ~ .target.default-target {
display: none;
}
.target:target,
.target.default-target {
  display: block;
}
</style>
</head>
<body>

<ul>
  <li><a href="#id1">Блок 1</a>
  </li>
  <li><a href="#id2">Блок 2</a>
  </li>
  <li><a href="#id3">Блок 3</a>
  </li>
  <li><a href="#id4">Блок 4</a>
  </li>
</ul>
<div class="target" id="id2">
    <div id="example1" class="slider-pro">
        <div class="sp-slides">
            <div class="sp-slide">
                <img class="sp-image" src="../src/css/images/blank.gif"
                    data-src="http://bqworks.com/slider-pro/images/image1_medium.jpg"
                    data-retina="http://bqworks.com/slider-pro/images/image1_large.jpg"/>
                <p class="sp-layer sp-white sp-padding"
                    data-horizontal="50" data-vertical="50"
                    data-show-transition="left" data-hide-transition="up" data-show-delay="400" data-hide-delay="200">
                    Lorem ipsum
                </p>
                <p class="sp-layer sp-black sp-padding hide-small-screen"
                    data-horizontal="180" data-vertical="50"
                    data-show-transition="left" data-hide-transition="up" data-show-delay="600" data-hide-delay="100">
                    dolor sit amet
                </p>
                <p class="sp-layer sp-white sp-padding hide-medium-screen"
                    data-horizontal="315" data-vertical="50"
                    data-show-transition="left" data-hide-transition="up" data-show-delay="800">
                    consectetur adipisicing elit.
                </p>
            </div>
            <div class="sp-slide">
                <img class="sp-image" src="../src/css/images/blank.gif"
                    data-src="http://bqworks.com/slider-pro/images/image1_medium.jpg"
                    data-retina="http://bqworks.com/slider-pro/images/image1_large.jpg"/>
                <p class="sp-layer sp-white sp-padding"
                    data-horizontal="50" data-vertical="50"
                    data-show-transition="left" data-hide-transition="up" data-show-delay="400" data-hide-delay="200">
                    Lorem ipsum
                </p>
                <p class="sp-layer sp-black sp-padding hide-small-screen"
                    data-horizontal="180" data-vertical="50"
                    data-show-transition="left" data-hide-transition="up" data-show-delay="600" data-hide-delay="100">
                    dolor sit amet
                </p>
                <p class="sp-layer sp-white sp-padding hide-medium-screen"
                    data-horizontal="315" data-vertical="50"
                    data-show-transition="left" data-hide-transition="up" data-show-delay="800">
                    consectetur adipisicing elit.
                </p>
            </div>
        </div>
        <div class="sp-thumbnails">
            <div class="sp-thumbnail">
                <div class="sp-thumbnail-title">Unde omnis</div>
                <div class="sp-thumbnail-description">Iste natus error sit voluptatem doloremque</div>
            </div>
            <div class="sp-thumbnail">
                <div class="sp-thumbnail-title">Laudantium</div>
                <div class="sp-thumbnail-description">Totam rem aperiam, eaque ipsa quae ab illo</div>
            </div>
        </div>

    </div>
<script type="text/javascript">
    $( document ).ready(function( $ ) {
        $( '#example1' ).sliderPro({
            width: 960,
            height: 500,
            arrows: true,
            buttons: false,
            waitForLayers: true,
            thumbnailWidth: 200,
            thumbnailHeight: 100,
            thumbnailPointer: true,
            autoplay: false,
            autoScaleLayers: false,
            breakpoints: {
                500: {
                    thumbnailWidth: 120,
                    thumbnailHeight: 50
                }
            }
        });
    });
</script>

</div>
<div class="target" id="id3">
    <div id="example2" class="slider-pro">
        <div class="sp-slides">
            <div class="sp-slide">
                <img class="sp-image" src="../src/css/images/blank.gif"
                    data-src="http://bqworks.com/slider-pro/images/image1_medium.jpg"
                    data-retina="http://bqworks.com/slider-pro/images/image1_large.jpg"/>
                <p class="sp-layer sp-white sp-padding"
                    data-horizontal="50" data-vertical="50"
                    data-show-transition="left" data-hide-transition="up" data-show-delay="400" data-hide-delay="200">
                    Lorem ipsum
                </p>
                <p class="sp-layer sp-black sp-padding hide-small-screen"
                    data-horizontal="180" data-vertical="50"
                    data-show-transition="left" data-hide-transition="up" data-show-delay="600" data-hide-delay="100">
                    dolor sit amet
                </p>
                <p class="sp-layer sp-white sp-padding hide-medium-screen"
                    data-horizontal="315" data-vertical="50"
                    data-show-transition="left" data-hide-transition="up" data-show-delay="800">
                    consectetur adipisicing elit.
                </p>
            </div>
            <div class="sp-slide">
                <img class="sp-image" src="../src/css/images/blank.gif"
                    data-src="http://bqworks.com/slider-pro/images/image1_medium.jpg"
                    data-retina="http://bqworks.com/slider-pro/images/image1_large.jpg"/>
                <p class="sp-layer sp-white sp-padding"
                    data-horizontal="50" data-vertical="50"
                    data-show-transition="left" data-hide-transition="up" data-show-delay="400" data-hide-delay="200">
                    Lorem ipsum
                </p>
                <p class="sp-layer sp-black sp-padding hide-small-screen"
                    data-horizontal="180" data-vertical="50"
                    data-show-transition="left" data-hide-transition="up" data-show-delay="600" data-hide-delay="100">
                    dolor sit amet
                </p>
                <p class="sp-layer sp-white sp-padding hide-medium-screen"
                    data-horizontal="315" data-vertical="50"
                    data-show-transition="left" data-hide-transition="up" data-show-delay="800">
                    consectetur adipisicing elit.
                </p>
            </div>
        </div>
        <div class="sp-thumbnails">
            <div class="sp-thumbnail">
                <div class="sp-thumbnail-title">Unde omnis</div>
                <div class="sp-thumbnail-description">Iste natus error sit voluptatem doloremque</div>
            </div>
            <div class="sp-thumbnail">
                <div class="sp-thumbnail-title">Laudantium</div>
                <div class="sp-thumbnail-description">Totam rem aperiam, eaque ipsa quae ab illo</div>
            </div>
        </div>

    </div>
<script type="text/javascript">
    $( document ).ready(function( $ ) {
        $( '#example2' ).sliderPro({
            width: 960,
            height: 500,
            arrows: true,
            buttons: false,
            waitForLayers: true,
            thumbnailWidth: 200,
            thumbnailHeight: 100,
            thumbnailPointer: true,
            autoplay: false,
            autoScaleLayers: false,
            breakpoints: {
                500: {
                    thumbnailWidth: 120,
                    thumbnailHeight: 50
                }
            }
        });
    });
</script>
</div>
<div class="target" id="id4">
    <div id="example3" class="slider-pro">
        <div class="sp-slides">
            <div class="sp-slide">
                <img class="sp-image" src="../src/css/images/blank.gif"
                    data-src="http://bqworks.com/slider-pro/images/image1_medium.jpg"
                    data-retina="http://bqworks.com/slider-pro/images/image1_large.jpg"/>
                <p class="sp-layer sp-white sp-padding"
                    data-horizontal="50" data-vertical="50"
                    data-show-transition="left" data-hide-transition="up" data-show-delay="400" data-hide-delay="200">
                    Lorem ipsum
                </p>
                <p class="sp-layer sp-black sp-padding hide-small-screen"
                    data-horizontal="180" data-vertical="50"
                    data-show-transition="left" data-hide-transition="up" data-show-delay="600" data-hide-delay="100">
                    dolor sit amet
                </p>
                <p class="sp-layer sp-white sp-padding hide-medium-screen"
                    data-horizontal="315" data-vertical="50"
                    data-show-transition="left" data-hide-transition="up" data-show-delay="800">
                    consectetur adipisicing elit.
                </p>
            </div>
            <div class="sp-slide">
                <img class="sp-image" src="../src/css/images/blank.gif"
                    data-src="http://bqworks.com/slider-pro/images/image1_medium.jpg"
                    data-retina="http://bqworks.com/slider-pro/images/image1_large.jpg"/>
                <p class="sp-layer sp-white sp-padding"
                    data-horizontal="50" data-vertical="50"
                    data-show-transition="left" data-hide-transition="up" data-show-delay="400" data-hide-delay="200">
                    Lorem ipsum
                </p>
                <p class="sp-layer sp-black sp-padding hide-small-screen"
                    data-horizontal="180" data-vertical="50"
                    data-show-transition="left" data-hide-transition="up" data-show-delay="600" data-hide-delay="100">
                    dolor sit amet
                </p>
                <p class="sp-layer sp-white sp-padding hide-medium-screen"
                    data-horizontal="315" data-vertical="50"
                    data-show-transition="left" data-hide-transition="up" data-show-delay="800">
                    consectetur adipisicing elit.
                </p>
            </div>
        </div>
        <div class="sp-thumbnails">
            <div class="sp-thumbnail">
                <div class="sp-thumbnail-title">Unde omnis</div>
                <div class="sp-thumbnail-description">Iste natus error sit voluptatem doloremque</div>
            </div>
            <div class="sp-thumbnail">
                <div class="sp-thumbnail-title">Laudantium</div>
                <div class="sp-thumbnail-description">Totam rem aperiam, eaque ipsa quae ab illo</div>
            </div>
        </div>

    </div>
<script type="text/javascript">
    $( document ).ready(function( $ ) {
        $( '#example3' ).sliderPro({
            width: 960,
            height: 500,
            arrows: true,
            buttons: false,
            waitForLayers: true,
            thumbnailWidth: 200,
            thumbnailHeight: 100,
            thumbnailPointer: true,
            autoplay: false,
            autoScaleLayers: false,
            breakpoints: {
                500: {
                    thumbnailWidth: 120,
                    thumbnailHeight: 50
                }
            }
        });
    });
</script>
</div>
<div class="target default-target" id="id1">
    <div id="example4" class="slider-pro">
        <div class="sp-slides">
            <div class="sp-slide">
                <img class="sp-image" src="../src/css/images/blank.gif"
                    data-src="http://bqworks.com/slider-pro/images/image1_medium.jpg"
                    data-retina="http://bqworks.com/slider-pro/images/image1_large.jpg"/>
                <p class="sp-layer sp-white sp-padding"
                    data-horizontal="50" data-vertical="50"
                    data-show-transition="left" data-hide-transition="up" data-show-delay="400" data-hide-delay="200">
                    Lorem ipsum
                </p>
                <p class="sp-layer sp-black sp-padding hide-small-screen"
                    data-horizontal="180" data-vertical="50"
                    data-show-transition="left" data-hide-transition="up" data-show-delay="600" data-hide-delay="100">
                    dolor sit amet
                </p>
                <p class="sp-layer sp-white sp-padding hide-medium-screen"
                    data-horizontal="315" data-vertical="50"
                    data-show-transition="left" data-hide-transition="up" data-show-delay="800">
                    consectetur adipisicing elit.
                </p>
            </div>
            <div class="sp-slide">
                <img class="sp-image" src="../src/css/images/blank.gif"
                    data-src="http://bqworks.com/slider-pro/images/image1_medium.jpg"
                    data-retina="http://bqworks.com/slider-pro/images/image1_large.jpg"/>
                <p class="sp-layer sp-white sp-padding"
                    data-horizontal="50" data-vertical="50"
                    data-show-transition="left" data-hide-transition="up" data-show-delay="400" data-hide-delay="200">
                    Lorem ipsum
                </p>
                <p class="sp-layer sp-black sp-padding hide-small-screen"
                    data-horizontal="180" data-vertical="50"
                    data-show-transition="left" data-hide-transition="up" data-show-delay="600" data-hide-delay="100">
                    dolor sit amet
                </p>
                <p class="sp-layer sp-white sp-padding hide-medium-screen"
                    data-horizontal="315" data-vertical="50"
                    data-show-transition="left" data-hide-transition="up" data-show-delay="800">
                    consectetur adipisicing elit.
                </p>
            </div>
        </div>
        <div class="sp-thumbnails">
            <div class="sp-thumbnail">
                <div class="sp-thumbnail-title">Unde omnis</div>
                <div class="sp-thumbnail-description">Iste natus error sit voluptatem doloremque</div>
            </div>
            <div class="sp-thumbnail">
                <div class="sp-thumbnail-title">Laudantium</div>
                <div class="sp-thumbnail-description">Totam rem aperiam, eaque ipsa quae ab illo</div>
            </div>
        </div>

    </div>
<script type="text/javascript">
    $( document ).ready(function( $ ) {
        $( '#example4' ).sliderPro({
            width: 960,
            height: 500,
            arrows: true,
            buttons: false,
            waitForLayers: true,
            thumbnailWidth: 200,
            thumbnailHeight: 100,
            thumbnailPointer: true,
            autoplay: false,
            autoScaleLayers: false,
            breakpoints: {
                500: {
                    thumbnailWidth: 120,
                    thumbnailHeight: 50
                }
            }
        });
    });
</script>
</div>
</body>