SAPID INFO

Код слайдер в слайдере, возможно формирование в цикле

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/[email protected]/slick/slick.css"/>
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js"></script>
<script>
    $(document).ready(function(){
        $('.activities_slider').slick({ });
        $('.services_slider_1').slick({ });
        $('.services_slider_2').slick({ });
        $('.services_slider_3').slick({ });

    $('a[data-activities]').click(function(e) {
       e.preventDefault();
       var slideno = $(this).data('activities');
       $('.activities_slider').slick('slickGoTo', slideno - 1);
    });
    
    $('a[data-services-1]').click(function(e) {
       e.preventDefault();
       var slideno = $(this).data('services-1');
       $('.services_slider_1').slick('slickGoTo', slideno - 1);
    });
    $('a[data-services-2]').click(function(e) {
       e.preventDefault();
       var slideno = $(this).data('services-2');
       $('.services_slider_2').slick('slickGoTo', slideno - 1);
    });
    $('a[data-services-3]').click(function(e) {
       e.preventDefault();
       var slideno = $(this).data('services-3');
       $('.services_slider_3').slick('slickGoTo', slideno - 1);
    });
});

  </script>

</head>
<body>

<div class="div_table">
    <div class="div_table_column">
        <div class="activities_slider_pager">
            <a class="" data-activities="1" href="" onclick="return false;"> Направление 1</a>
            <a class="" data-activities="2" href="" onclick="return false;"> Направление 2</a>
            <a class="" data-activities="3" href="" onclick="return false;"> Направление 3</a>
        </div>
    </div>
    <div class="div_table_column">
        <div class="activities_slider">
            <div class="activities_slide">
                <div class="div_table">
                    <div class="div_table_column">
                        <div class="services_slider_1">
                            <div class="services_slide">
                                1.1 lorem ipsum
                            </div>
                            <div class="services_slide">
                                1.2 lorem ipsum
                            </div>
                            <div class="services_slide">
                                1.3 lorem ipsum
                            </div>
                            <div class="services_slide">
                                1.4 lorem ipsum
                            </div>
                        </div>
                    </div>
                    <div class="div_table_column">
                        <div class="activities_slide_1_pager">
                            <div class="services_slider_pager">
                                <a class="" data-services-1="1" href="" onclick="return false;"> Направление 1</a>
                                <a class="" data-services-1="2" href="" onclick="return false;"> Направление 2</a>
                                <a class="" data-services-1="3" href="" onclick="return false;"> Направление 3</a>
                                <a class="" data-services-1="4" href="" onclick="return false;"> Направление 4</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="activities_slide">
                <div class="div_table">
                    <div class="div_table_column">
                        <div class="services_slider_2">
                            <div class="services_slide">
                                2.1
                            </div>
                            <div class="services_slide">
                                2.2
                            </div>
                            <div class="services_slide">
                                2.3
                            </div>
                        </div>
                    </div>
                    <div class="div_table_column">
                        <div class="activities_slide_1_pager">
                            <div class="services_slider_pager">
                                <a class="" data-services-2="1" href="" onclick="return false;"> Направление 1</a>
                                <a class="" data-services-2="2" href="" onclick="return false;"> Направление 2</a>
                                <a class="" data-services-2="3" href="" onclick="return false;"> Направление 3</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="activities_slide">
                <div class="div_table">
                    <div class="div_table_column">
                        <div class="services_slider_3">
                            <div class="services_slide">
                                3.1
                            </div>
                            <div class="services_slide">
                                3.2
                            </div>
                            <div class="services_slide">
                                3.3
                            </div>
                        </div>
                    </div>
                    <div class="div_table_column">
                        <div class="activities_slide_1_pager">
                            <div class="services_slider_pager">
                                <a class="" data-services-3="1" href="" onclick="return false;"> Направление 1</a>
                                <a class="" data-services-3="2" href="" onclick="return false;"> Направление 2</a>
                                <a class="" data-services-3="3" href="" onclick="return false;"> Направление 3</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<style>
.div_table { display: table; }
.div_table_column { display: table-cell; border: 1px solid black; }

.activities_slider { width: 600px; height: 200px; }
.activities_slide { width: 600px; height: 200px; }

.services_slider_1,
.services_slider_2,
.services_slider_3,
.services_slider { width: 300px; height: 200px; }
.services_slide { width: 300px; height: 200px; }
</style>    
</body>
</html>





<?php

/* 
 * To change this license header, choose License Headers in Project Properties.
 * To change this template file, choose Tools | Templates
 * and open the template in the editor.

 * 
 * 
 * 

<html>
<head>

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script>

<script>
    $(document).ready(function(){
        $('.activities_slider').bxSlider({
                pagerCustom: '.activities_slider_pager',

            }      
        );
        $('.services_slider').bxSlider({

                maxSlides : 1
            }
        );
    });
    
  </script>

</head>
<body>

<div class="div_table">
    <div class="div_table_column">
        <div class="activities_slider_pager">
            <a class="" data-slide="0" href="" onclick="return false;"> Направление 1</a>
            <a class="" data-slide="1" href="" onclick="return false;"> Направление 2</a>
            <a class="" data-slide="2" href="" onclick="return false;"> Направление 3</a>
        </div>
    </div>
    <div class="div_table_column">
        <div class="activities_slider">
            <div class="activities_slide">
                <div class="div_table">
                    <div class="div_table_column">
                        <div class="services_slider">
                            <div class="services_slide">
                                1.1 lorem ipsum
                            </div>
                            <div class="services_slide">
                                1.2 lorem ipsum
                            </div>
                            <div class="services_slide">
                                1.3 lorem ipsum
                            </div>
                        </div>
                    </div>
                    <div class="div_table_column">
                        <div class="activities_slide_1_pager">
                            <div class="activities_slider_pager">
                                <a class="" data-slide="0" href="" onclick="return false;"> Услуга 1</a>
                                <a class="" data-slide="1" href="" onclick="return false;"> Услуга 2</a>
                                <a class="" data-slide="2" href="" onclick="return false;"> Услуга 3</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="activities_slide">
                <div class="div_table">
                    <div class="div_table_column">
                        <div class="services_slider">
                            <div class="services_slide">
                                2.1
                            </div>
                            <div class="services_slide">
                                2.2
                            </div>
                            <div class="services_slide">
                                2.3
                            </div>
                        </div>
                    </div>
                    <div class="div_table_column">
                        <div class="activities_slide_2_pager">
                            <div class="activities_slider_pager">
                                <a class="" data-slide="0" href="" onclick="return false;"> Услуга 1</a>
                                <a class="" data-slide="1" href="" onclick="return false;"> Услуга 2</a>
                                <a class="" data-slide="2" href="" onclick="return false;"> Услуга 3</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="activities_slide">
                <div class="div_table">
                    <div class="div_table_column">
                        <div class="services_slider">
                            <div class="services_slide">
                                3.1
                            </div>
                            <div class="services_slide">
                                3.2
                            </div>
                            <div class="services_slide">
                                3.3
                            </div>
                        </div>
                    </div>
                    <div class="div_table_column">
                        <div class="activities_slide_3_pager">
                            <div class="activities_slider_pager">
                                <a class="" data-slide="0" href="" onclick="return false;"> Услуга 1</a>
                                <a class="" data-slide="1" href="" onclick="return false;"> Услуга 2</a>
                                <a class="" data-slide="2" href="" onclick="return false;"> Услуга 3</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<style>
.div_table { display: table; }
.div_table_column { display: table-cell; }

.activities_slider { width: 600px; height: 200px; }
.activities_slide { width: 600px; height: 200px; }

.services_slider { width: 300px; height: 200px; }
.services_slide { width: 300px; height: 200px; }
</style>    
</body>
</html>

 


Комментарии к статье
Добавьте свой комментарий - оставьте след в блоге!