Magazine - Slider

by Arnaud JACQUES.

Overview

In wrinting...


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

Chose surprenante

J'ai sélectionné cette photo en recherchant sur Pixabay et je l'ai trouvé magnifique, vous pouvez la voir en cliquant sur "Découvrir".

Découvrir

Arnaud JACQUES

Je suis photographe et développeur web, vous pouvez donc visiter mon compte Instagram pour voir mes photos.

Découvrir

Lorem ipsum

Vous pouvez changer ce texte assez facilement :)

Changer moi

<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide slider-1"
             style="background-image: url('https://arnaudjacques.fr/template/magazine/1/res/img/slider-1.jpg');">
            <div class="container">
                <div class="w-50">
                    <h2>Chose surprenante</h2>
                    <p>J'ai sélectionné cette photo en recherchant sur Pixabay et je l'ai trouvé magnifique, vous pouvez
                        la voir en cliquant sur "Découvrir".</p>
                    <a href="https://pixabay.com/photos/fashionable-girl-in-glasses-1382946/" class="btn template"><i>Découvrir</i></a>
                </div>
            </div>
        </div>
        <div class="swiper-slide"
             style="background-image: url('https://arnaudjacques.fr/template/magazine/1/res/img/slider-2.jpg');">
            <div class="container">
                <div class="w-50">
                    <h2>Arnaud JACQUES</h2>
                    <p>Je suis photographe et développeur web, vous pouvez donc visiter mon compte Instagram pour voir
                        mes photos.</p>
                    <a href="https://instagram.com/arnaud.jcs/" class="btn template"><i>Découvrir</i></a>
                </div>
            </div>
        </div>
        <div class="swiper-slide"
             style="background-image: url('https://arnaudjacques.fr/template/magazine/1/res/img/slider-3.jpg');">
            <div class="container">
                <div class="w-50">
                    <h2>Lorem ipsum</h2>
                    <p>Vous pouvez changer ce texte assez facilement :)</p>
                    <a href="https://pixabay.com/photos/fashionable-girl-in-glasses-1382946/" class="btn template"><i>Changer
                        moi</i></a>
                </div>
            </div>
        </div>
    </div>
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-pagination"></div>
</div>
<script>
    document.addEventListener("DOMContentLoaded", function (event) {
        var Swipes = new Swiper('.swiper-container', {
            loop: true,
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
            pagination: {
                el: '.swiper-pagination',
            },
        });
    });
</script>