Magazine - Display Article

by Arnaud JACQUES.

Overview

In wrinting...


<link href="https://laarmwork.arnaudjacques.fr/res/css/add-ons/magazine-display-article.css" rel="stylesheet">
            

news

Image 3

Cette photo est magnifique

10 Fevrier 2020

Image 2

Cette photo est magnifique ds qds dsq sq dsq dsq ds qds ds

10 Fevrier 2020

Image 1

Cette photo est magnifique

10 Fevrier 2020

Image 2

Cette photo est magnifique

10 Fevrier 2020

Image 3

Cette photo est magnifique

10 Fevrier 2020

Image 1

Cette photo est magnifique

10 Fevrier 2020


<section id="news">
    <h2 class="titre">news</h2>
    <div class="menu">
        <div class="container">
            <div class="left">
                <a href="#" class="active"><i class="fas fa-clock"></i> + récents</a>
                <a href="#"><i class="fas fa-fire"></i> + populaires</a>
            </div>
            <div class="right">
                <a href="#">+ de news</a>
            </div>
        </div>
    </div>
    <div class="content">
        <div class="container flex">
            <div class="item">
                <picture class="top">
                    <img src="https://arnaudjacques.fr/template/magazine/1/res/img/slider-3.jpg"
                         alt="Image 3"/>
                </picture>
                <div class="bottom">
                    <h3>Cette photo est magnifique</h3>
                    <p>10 Fevrier 2020</p>
                </div>
            </div>
            <div class="item">
                <picture class="top">
                    <img src="https://arnaudjacques.fr/template/magazine/1/res/img/slider-2.jpg"
                         alt="Image 2"/>
                </picture>
                <div class="bottom">
                    <h3>Cette photo est magnifique ds qds dsq sq dsq dsq ds qds ds</h3>
                    <p>10 Fevrier 2020</p>
                </div>
            </div>
            <div class="item">
                <picture class="top">
                    <img src="https://arnaudjacques.fr/template/magazine/1/res/img/slider-1.jpg"
                         alt="Image 1"/>
                </picture>
                <div class="bottom">
                    <h3>Cette photo est magnifique</h3>
                    <p>10 Fevrier 2020</p>
                </div>
            </div>
            <div class="item">
                <picture class="top">
                    <img src="https://arnaudjacques.fr/template/magazine/1/res/img/slider-2.jpg"
                         alt="Image 2"/>
                </picture>
                <div class="bottom">
                    <h3>Cette photo est magnifique</h3>
                    <p>10 Fevrier 2020</p>
                </div>
            </div>
            <div class="item">
                <picture class="top">
                    <img src="https://arnaudjacques.fr/template/magazine/1/res/img/slider-3.jpg"
                         alt="Image 3"/>
                </picture>
                <div class="bottom">
                    <h3>Cette photo est magnifique</h3>
                    <p>10 Fevrier 2020</p>
                </div>
            </div>
            <div class="item">
                <picture class="top">
                    <img src="https://arnaudjacques.fr/template/magazine/1/res/img/slider-1.jpg"
                         alt="Image 1"/>
                </picture>
                <div class="bottom">
                    <h3>Cette photo est magnifique</h3>
                    <p>10 Fevrier 2020</p>
                </div>
            </div>
        </div>
        <div class="pagination-left"><i class="fas fa-chevron-left"></i></div>
        <div class="pagination-right"><i class="fas fa-chevron-right"></i></div>
    </div>
</section>
<script>
    document.addEventListener("DOMContentLoaded", function (event) {
        let pagination = 0;
        let displayContent = 1; // default : 1
        let sizeOfItem = 485; // default : 970
        $("#news .pagination-left").click(function (e) {
            e.preventDefault();
            pagination--;
            paginationAnimation(pagination)
        })
        $("#news .pagination-right").click(function (e) {
            e.preventDefault();
            pagination++;
            paginationAnimation(pagination)
        })
        paginationAnimation(pagination);

        function paginationAnimation(pagination) {
            if ($(document).width() > 991) {
                paginationMax = $("#news .item").length / displayContent;
                if (pagination >= paginationMax) {
                    $('#news .pagination-right').css("display", 'none')
                } else {
                    $("#news .content .container").css('transform', 'translate3d(-' + pagination * sizeOfItem + 'px, 0px, 0px)');
                    $('#news .pagination-right').css("display", 'block')
                }
                if (pagination >= paginationMax - 1) {
                    $('#news .pagination-right').css("display", 'none')
                } else {
                    $('#news .pagination-right').css("display", 'block')
                }
                if (pagination === 0) {
                    $('#news .pagination-left').css("display", 'none')
                } else {
                    $('#news .pagination-left').css("display", 'block')
                }
            }
        }
    })
</script>