Страница 1 из 2 1 2 >
Показывать 40 сообщений этой темы на одной странице

Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Слайдер с пагинацией (https://javascript.ru/forum/misc/79901-slajjder-s-paginaciejj.html)

korifey 05.04.2020 17:11
Слайдер с пагинацией
 
Как бы сделать слайдер к данной пагинации.
<!doctype html>
<html>
    <head>
        <meta charset = "utf8" />
<style>
html {
    height: 100%;
    width: 100%;
    background-color: #D7D7D7;
    background-image: -webkit-radial-gradient(contain, #F2F2F2, #D1D1D1);
    background-image:    -moz-radial-gradient(contain, #F2F2F2, #D1D1D1);
    background-image:     -ms-radial-gradient(contain, #F2F2F2, #D1D1D1);
    background-image:      -o-radial-gradient(contain, #F2F2F2, #D1D1D1);
    background-image:         radial-gradient(contain, #F2F2F2, #D1D1D1);
}
#pagination {
    display: inline-block;
    vertical-align: middle;
    border-radius: 4px;
    padding: 1px 2px 4px 2px;
    border-top: 1px solid #AEAEAE;
    border-bottom: 1px solid #FFFFFF;
    background-color: #DADADA;
    background-image: -webkit-linear-gradient(top, #DBDBDB, #E2E2E2);
    background-image:    -moz-linear-gradient(top, #DBDBDB, #E2E2E2);
    background-image:     -ms-linear-gradient(top, #DBDBDB, #E2E2E2);
    background-image:      -o-linear-gradient(top, #DBDBDB, #E2E2E2);
    background-image:         linear-gradient(top, #DBDBDB, #E2E2E2);
}
#pagination a, #pagination i {
    display: inline-block;
    vertical-align: middle;
    width: 22px;
    color: #7D7D7D;
    text-align: center;
    font-size: 10px;
    padding: 3px 0 2px 0;
    -webkit-user-select:none;
       -moz-user-select:none;
        -ms-user-select:none;
         -o-user-select:none;
            user-select:none;
}

#pagination a {
    margin: 0 2px 0 2px;
    border-radius: 4px;
    border: 1px solid #E3E3E3;
    cursor: pointer;
    box-shadow: inset 0 1px 0 0 #FFF, 0 1px 2px #666;
    text-shadow: 0 1px 1px #FFF;
    background-color: #E6E6E6;
    background-image: -webkit-linear-gradient(top, #F3F3F3, #D7D7D7);
    background-image:    -moz-linear-gradient(top, #F3F3F3, #D7D7D7);
    background-image:     -ms-linear-gradient(top, #F3F3F3, #D7D7D7);
    background-image:      -o-linear-gradient(top, #F3F3F3, #D7D7D7);
    background-image:         linear-gradient(top, #F3F3F3, #D7D7D7);
}
#pagination i {
    margin: 0 3px 0 3px;
}
#pagination a.current {
    border: 1px solid #E9E9E9;
    box-shadow: 0 1px 1px #999;
    background-color: #DFDFDF;
    background-image: -webkit-linear-gradient(top, #D0D0D0, #EBEBEB);
    background-image:    -moz-linear-gradient(top, #D0D0D0, #EBEBEB);
    background-image:     -ms-linear-gradient(top, #D0D0D0, #EBEBEB);
    background-image:      -o-linear-gradient(top, #D0D0D0, #EBEBEB);
    background-image:         linear-gradient(top, #D0D0D0, #EBEBEB);
}
.slidecontainer {
    width: 100%;
}

.slider {
    -webkit-appearance: none;
    width: 100%;
    height: 25px;
    background: #d3d3d3;
    outline: none;
    opacity: 0.7;
    -webkit-transition: .2s;
    transition: opacity .2s;
}

.slider:hover {
    opacity: 1;
}

.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 25px;
    height: 25px;
    background: #4CAF50;
    cursor: pointer;
}

.slider::-moz-range-thumb {
    width: 25px;
    height: 25px;
    background: #4CAF50;
    cursor: pointer;
}
</style>
</head>
<body>
<div class="slidecontainer">
  <input type="range" min="1" max="100" value="1">
</div>
<div id="pagination"></div>
                <script>
var Pagination = {
    code: '',
    Extend: function(data) {
        data = data || {};
        Pagination.size = data.size || 150;
        Pagination.page = data.page || 1;
        Pagination.step = data.step || 3;
    },
    Add: function(s, f) {
        for (var i = s; i < f; i++) {
            Pagination.code += '<a>' + i + '</a>';
        }
    },
    Last: function() {
        Pagination.code += '<i>...</i><a>' + Pagination.size + '</a>';
    },
    First: function() {
        Pagination.code += '<a>1</a><i>...</i>';
    },
    Click: function() {
        Pagination.page = +this.innerHTML;
        Pagination.Start();
    },
    Prev: function() {
        Pagination.page--;
        if (Pagination.page < 1) {
            Pagination.page = 1;
        }
        Pagination.Start();
    },
    Next: function() {
        Pagination.page++;
        if (Pagination.page > Pagination.size) {
            Pagination.page = Pagination.size;
        }
        Pagination.Start();
    },
    Bind: function() {
        var a = Pagination.e.getElementsByTagName('a');
        for (var i = 0; i < a.length; i++) {
            if (+a[i].innerHTML === Pagination.page) a[i].className = 'current';
            a[i].addEventListener('click', Pagination.Click, false);
        }
    },
    Finish: function() {
        Pagination.e.innerHTML = Pagination.code;
        Pagination.code = '';
        Pagination.Bind();
    },
    Start: function() {
        if (Pagination.size < Pagination.step * 2 + 6) {
            Pagination.Add(1, Pagination.size + 1);
        }
        else if (Pagination.page < Pagination.step * 2 + 1) {
            Pagination.Add(1, Pagination.step * 2 + 4);
            Pagination.Last();
        }
        else if (Pagination.page > Pagination.size - Pagination.step * 2) {
            Pagination.First();
            Pagination.Add(Pagination.size - Pagination.step * 2 - 2, Pagination.size + 1);
        }
        else {
            Pagination.First();
            Pagination.Add(Pagination.page - Pagination.step, Pagination.page + Pagination.step + 1);
            Pagination.Last();
        }
        Pagination.Finish();
    },
    Buttons: function(e) {
        var nav = e.getElementsByTagName('a');
        nav[0].addEventListener('click', Pagination.Prev, false);
        nav[1].addEventListener('click', Pagination.Next, false);
    },
    Create: function(e) {
        var html = [
            '<a>&#9668;</a>', // previous button
            '<span></span>',  // pagination container
            '<a>&#9658;</a>'  // next button
        ];
        e.innerHTML = html.join('');
        Pagination.e = e.getElementsByTagName('span')[0];
        Pagination.Buttons(e);
    },
    Init: function(e, data) {
        Pagination.Extend(data);
        Pagination.Create(e);
        Pagination.Start();
    }
};
var init = function() {
    Pagination.Init(document.getElementById('pagination'), {
        size: 30, // pages size
        page: 1,  // selected page
        step: 3   // pages before and after current
    });
};
document.addEventListener('DOMContentLoaded', init, false);
        </script>
    </body>
</html>

рони 05.04.2020 17:18
korifey,
допишите смену value в строку 154.

рони 05.04.2020 17:34
pagination and input type range
 
korifey,

<!doctype html>
<html>
    <head>
        <meta charset = "utf8" />
<style>
html {
    height: 100%;
    width: 100%;
    background-color: #D7D7D7;
    background-image: -webkit-radial-gradient(contain, #F2F2F2, #D1D1D1);
    background-image:    -moz-radial-gradient(contain, #F2F2F2, #D1D1D1);
    background-image:     -ms-radial-gradient(contain, #F2F2F2, #D1D1D1);
    background-image:      -o-radial-gradient(contain, #F2F2F2, #D1D1D1);
    background-image:         radial-gradient(contain, #F2F2F2, #D1D1D1);
}
#pagination {
    display: inline-block;
    vertical-align: middle;
    border-radius: 4px;
    padding: 1px 2px 4px 2px;
    border-top: 1px solid #AEAEAE;
    border-bottom: 1px solid #FFFFFF;
    background-color: #DADADA;
    background-image: -webkit-linear-gradient(top, #DBDBDB, #E2E2E2);
    background-image:    -moz-linear-gradient(top, #DBDBDB, #E2E2E2);
    background-image:     -ms-linear-gradient(top, #DBDBDB, #E2E2E2);
    background-image:      -o-linear-gradient(top, #DBDBDB, #E2E2E2);
    background-image:         linear-gradient(top, #DBDBDB, #E2E2E2);
}
#pagination a, #pagination i {
    display: inline-block;
    vertical-align: middle;
    width: 22px;
    color: #7D7D7D;
    text-align: center;
    font-size: 10px;
    padding: 3px 0 2px 0;
    -webkit-user-select:none;
       -moz-user-select:none;
        -ms-user-select:none;
         -o-user-select:none;
            user-select:none;
}

#pagination a {
    margin: 0 2px 0 2px;
    border-radius: 4px;
    border: 1px solid #E3E3E3;
    cursor: pointer;
    box-shadow: inset 0 1px 0 0 #FFF, 0 1px 2px #666;
    text-shadow: 0 1px 1px #FFF;
    background-color: #E6E6E6;
    background-image: -webkit-linear-gradient(top, #F3F3F3, #D7D7D7);
    background-image:    -moz-linear-gradient(top, #F3F3F3, #D7D7D7);
    background-image:     -ms-linear-gradient(top, #F3F3F3, #D7D7D7);
    background-image:      -o-linear-gradient(top, #F3F3F3, #D7D7D7);
    background-image:         linear-gradient(top, #F3F3F3, #D7D7D7);
}
#pagination i {
    margin: 0 3px 0 3px;
}
#pagination a.current {
    border: 1px solid #E9E9E9;
    box-shadow: 0 1px 1px #999;
    background-color: #DFDFDF;
    background-image: -webkit-linear-gradient(top, #D0D0D0, #EBEBEB);
    background-image:    -moz-linear-gradient(top, #D0D0D0, #EBEBEB);
    background-image:     -ms-linear-gradient(top, #D0D0D0, #EBEBEB);
    background-image:      -o-linear-gradient(top, #D0D0D0, #EBEBEB);
    background-image:         linear-gradient(top, #D0D0D0, #EBEBEB);
}
.slidecontainer {
    width: 100%;
}

.slider {
    -webkit-appearance: none;
    width: 100%;
    height: 25px;
    background: #d3d3d3;
    outline: none;
    opacity: 0.7;
    -webkit-transition: .2s;
    transition: opacity .2s;
}

.slider:hover {
    opacity: 1;
}

.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 25px;
    height: 25px;
    background: #4CAF50;
    cursor: pointer;
}

.slider::-moz-range-thumb {
    width: 25px;
    height: 25px;
    background: #4CAF50;
    cursor: pointer;
}
</style>
</head>
<body>
<div class="slidecontainer">
  <input type="range" min="1" max="30" value="1">
</div>
<div id="pagination"></div>
                <script>
var Pagination = {
    code: '',
    Extend: function(data) {
        data = data || {};
        Pagination.size = data.size || 150;
        Pagination.page = data.page || 1;
        Pagination.step = data.step || 3;
        Pagination.input = data.input || null;
    },
    Add: function(s, f) {
        for (var i = s; i < f; i++) {
            Pagination.code += '<a>' + i + '</a>';
        }
    },
    Last: function() {
        Pagination.code += '<i>...</i><a>' + Pagination.size + '</a>';
    },
    First: function() {
        Pagination.code += '<a>1</a><i>...</i>';
    },
    Click: function() {
        Pagination.page = +this.innerHTML;
        Pagination.Start();
    },
    Prev: function() {
        Pagination.page--;
        if (Pagination.page < 1) {
            Pagination.page = 1;
        }
        Pagination.Start();
    },
    Next: function() {
        Pagination.page++;
        if (Pagination.page > Pagination.size) {
            Pagination.page = Pagination.size;
        }
        Pagination.Start();
    },
    Bind: function() {
        var a = Pagination.e.getElementsByTagName('a');
        for (var i = 0; i < a.length; i++) {
            if (+a[i].innerHTML === Pagination.page) {
            if(Pagination.input) Pagination.input.value = Pagination.page;
            a[i].className = 'current';
            }
            a[i].addEventListener('click', Pagination.Click, false);
        }
    },
    Finish: function() {
        Pagination.e.innerHTML = Pagination.code;
        Pagination.code = '';
        Pagination.Bind();
    },
    Start: function() {
        if (Pagination.size < Pagination.step * 2 + 6) {
            Pagination.Add(1, Pagination.size + 1);
        }
        else if (Pagination.page < Pagination.step * 2 + 1) {
            Pagination.Add(1, Pagination.step * 2 + 4);
            Pagination.Last();
        }
        else if (Pagination.page > Pagination.size - Pagination.step * 2) {
            Pagination.First();
            Pagination.Add(Pagination.size - Pagination.step * 2 - 2, Pagination.size + 1);
        }
        else {
            Pagination.First();
            Pagination.Add(Pagination.page - Pagination.step, Pagination.page + Pagination.step + 1);
            Pagination.Last();
        }
        Pagination.Finish();
    },
    Buttons: function(e) {
        var nav = e.getElementsByTagName('a');
        nav[0].addEventListener('click', Pagination.Prev, false);
        nav[1].addEventListener('click', Pagination.Next, false);
    },
    Create: function(e) {
        var html = [
            '<a>&#9668;</a>', // previous button
            '<span></span>',  // pagination container
            '<a>&#9658;</a>'  // next button
        ];
        e.innerHTML = html.join('');
        Pagination.e = e.getElementsByTagName('span')[0];
        Pagination.Buttons(e);
    },
    Init: function(e, data) {
        Pagination.Extend(data);
        Pagination.Create(e);
        Pagination.Start();
    }
};
var init = function() {
var input = document.querySelector('.slidecontainer input');
Pagination.Init(document.getElementById('pagination'), {
        size: 30, // pages size
        page: 1,  // selected page
        step: 3,   // pages before and after current
        input: input
    });

input.addEventListener('input', function() {
     Pagination.page = +this.value;
     Pagination.Start();
})

};
document.addEventListener('DOMContentLoaded', init, false);
        </script>
    </body>
</html>

korifey 05.04.2020 19:22
А как бы
<div class="slidecontainer">
<input type="range" min="1" max="30" value="1"></div>

вставить в javascript.

рони 05.04.2020 20:08
Цитата:
Сообщение от korifey
А как бы
???

korifey 06.04.2020 09:51
Интегрировать слайдер в код пагинации.

рони 06.04.2020 10:26
korifey,
<!doctype html>
<html>
    <head>
        <meta charset = "utf8" />
<style>
html {
    height: 100%;
    width: 100%;
    background-color: #D7D7D7;
    background-image: -webkit-radial-gradient(contain, #F2F2F2, #D1D1D1);
    background-image:    -moz-radial-gradient(contain, #F2F2F2, #D1D1D1);
    background-image:     -ms-radial-gradient(contain, #F2F2F2, #D1D1D1);
    background-image:      -o-radial-gradient(contain, #F2F2F2, #D1D1D1);
    background-image:         radial-gradient(contain, #F2F2F2, #D1D1D1);
}
#pagination {
    display: inline-block;
    vertical-align: middle;
    border-radius: 4px;
    padding: 1px 2px 4px 2px;
    border-top: 1px solid #AEAEAE;
    border-bottom: 1px solid #FFFFFF;
    background-color: #DADADA;
    background-image: -webkit-linear-gradient(top, #DBDBDB, #E2E2E2);
    background-image:    -moz-linear-gradient(top, #DBDBDB, #E2E2E2);
    background-image:     -ms-linear-gradient(top, #DBDBDB, #E2E2E2);
    background-image:      -o-linear-gradient(top, #DBDBDB, #E2E2E2);
    background-image:         linear-gradient(top, #DBDBDB, #E2E2E2);
}
#pagination a, #pagination i {
    display: inline-block;
    vertical-align: middle;
    width: 22px;
    color: #7D7D7D;
    text-align: center;
    font-size: 10px;
    padding: 3px 0 2px 0;
    -webkit-user-select:none;
       -moz-user-select:none;
        -ms-user-select:none;
         -o-user-select:none;
            user-select:none;
}

#pagination a {
    margin: 0 2px 0 2px;
    border-radius: 4px;
    border: 1px solid #E3E3E3;
    cursor: pointer;
    box-shadow: inset 0 1px 0 0 #FFF, 0 1px 2px #666;
    text-shadow: 0 1px 1px #FFF;
    background-color: #E6E6E6;
    background-image: -webkit-linear-gradient(top, #F3F3F3, #D7D7D7);
    background-image:    -moz-linear-gradient(top, #F3F3F3, #D7D7D7);
    background-image:     -ms-linear-gradient(top, #F3F3F3, #D7D7D7);
    background-image:      -o-linear-gradient(top, #F3F3F3, #D7D7D7);
    background-image:         linear-gradient(top, #F3F3F3, #D7D7D7);
}
#pagination i {
    margin: 0 3px 0 3px;
}
#pagination a.current {
    border: 1px solid #E9E9E9;
    box-shadow: 0 1px 1px #999;
    background-color: #DFDFDF;
    background-image: -webkit-linear-gradient(top, #D0D0D0, #EBEBEB);
    background-image:    -moz-linear-gradient(top, #D0D0D0, #EBEBEB);
    background-image:     -ms-linear-gradient(top, #D0D0D0, #EBEBEB);
    background-image:      -o-linear-gradient(top, #D0D0D0, #EBEBEB);
    background-image:         linear-gradient(top, #D0D0D0, #EBEBEB);
}
.slidecontainer {
    width: 100%;
}

.slider {
    -webkit-appearance: none;
    width: 100%;
    height: 25px;
    background: #d3d3d3;
    outline: none;
    opacity: 0.7;
    -webkit-transition: .2s;
    transition: opacity .2s;
}

.slider:hover {
    opacity: 1;
}

.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 25px;
    height: 25px;
    background: #4CAF50;
    cursor: pointer;
}

.slider::-moz-range-thumb {
    width: 25px;
    height: 25px;
    background: #4CAF50;
    cursor: pointer;
}
</style>
</head>
<body>

<div id="pagination"></div>
                <script>
var Pagination = {
    code: '',
    Extend: function(data) {
        data = data || {};
        Pagination.size = data.size || 150;
        Pagination.page = data.page || 1;
        Pagination.step = data.step || 3;
        Pagination.input = data.input || false;
    },
    Add: function(s, f) {
        for (var i = s; i < f; i++) {
            Pagination.code += '<a>' + i + '</a>';
        }
    },
    Last: function() {
        Pagination.code += '<i>...</i><a>' + Pagination.size + '</a>';
    },
    First: function() {
        Pagination.code += '<a>1</a><i>...</i>';
    },
    Click: function() {
        Pagination.page = +this.innerHTML;
        Pagination.Start();
    },
    Prev: function() {
        Pagination.page--;
        if (Pagination.page < 1) {
            Pagination.page = 1;
        }
        Pagination.Start();
    },
    Next: function() {
        Pagination.page++;
        if (Pagination.page > Pagination.size) {
            Pagination.page = Pagination.size;
        }
        Pagination.Start();
    },
    Bind: function() {
        var a = Pagination.e.getElementsByTagName('a');
        for (var i = 0; i < a.length; i++) {
            if (+a[i].innerHTML === Pagination.page) {
            if(Pagination.input) Pagination.input.value = Pagination.page;
            a[i].className = 'current';

            }
            a[i].addEventListener('click', Pagination.Click, false);
        }
    },
    Finish: function() {
        Pagination.e.innerHTML = Pagination.code;
        Pagination.code = '';
        Pagination.Bind();

    },
    Start: function() {
        if (Pagination.size < Pagination.step * 2 + 6) {
            Pagination.Add(1, Pagination.size + 1);
        }
        else if (Pagination.page < Pagination.step * 2 + 1) {
            Pagination.Add(1, Pagination.step * 2 + 4);
            Pagination.Last();
        }
        else if (Pagination.page > Pagination.size - Pagination.step * 2) {
            Pagination.First();
            Pagination.Add(Pagination.size - Pagination.step * 2 - 2, Pagination.size + 1);
        }
        else {
            Pagination.First();
            Pagination.Add(Pagination.page - Pagination.step, Pagination.page + Pagination.step + 1);
            Pagination.Last();
        }
        Pagination.Finish();
    },
    Buttons: function(e) {
        var nav = e.getElementsByTagName('a');
        nav[0].addEventListener('click', Pagination.Prev, false);
        nav[1].addEventListener('click', Pagination.Next, false);
    },
    Create: function(e) {
        var html = [
            '<a>◄</a>', // previous button
            '<span></span>',  // pagination container
            '<a>►</a>'  // next button
        ];
        e.innerHTML = html.join('');
        Pagination.e = e.getElementsByTagName('span')[0];
        Pagination.Buttons(e);
    if(Pagination.input) {
    var html = `<div class="slidecontainer">
    <input type="range" min="1" max="${Pagination.size}" value="1">
    </div>`;
    e.insertAdjacentHTML("beforebegin", html);
    Pagination.input = document.querySelector('.slidecontainer input');
    Pagination.input.addEventListener('input', function() {
    Pagination.page = +this.value;
    Pagination.Start();
         });

        }
    },
    Init: function(e, data) {
        Pagination.Extend(data);
        Pagination.Create(e);
        Pagination.Start();
        Pagination.input && (Pagination.input.style.width = `${e.offsetWidth}px`);
    }
};
var init = function() {
Pagination.Init(document.getElementById('pagination'), {
        size: 30, // pages size
        page: 1,  // selected page
        step: 3,   // pages before and after current
        input: true
    });
};
document.addEventListener('DOMContentLoaded', init, false);
        </script>
    </body>
</html>

korifey 06.04.2020 10:47
Спасибо!!!

korifey 06.04.2020 11:59
А как вывести номер кликнувшей страницы для дальнейшей работы с ней?

рони 06.04.2020 13:55
Цитата:
Сообщение от korifey
А как вывести номер кликнувшей страницы для дальнейшей работы с ней?
в конце строк 133, 140, 147, 207 добавьте нужный вам код (alert(Pagination.page))
код ниже


Часовой пояс GMT +3, время: 12:41.
Страница 1 из 2 1 2 >
Показывать 40 сообщений этой темы на одной странице