CodePen Embed - 04/08/2020 c использованием .css ()

 
    <body>
        <div class="gallery gallery-1">
            <div class="photos">
                <img src="https://res.cloudinary.com/dqdxca8sz/image/upload/v1584037136/%D0%9C%D0%B5%D0%B4%D0%B8%D0%B0%D1%84%D0%B0%D0%B9%D0%BB%D1%8B%20%D0%B4%D0%BB%D1%8F%20Codepen/%D0%9C%D0%B5%D0%B4%D0%B8%D0%BE%D1%84%D0%B0%D0%B9%D0%BB%D1%8B%20%D0%B4%D0%BB%D1%8F%20%D0%B0%D0%BA%D0%BA%D0%B0%D1%83%D0%BD%D1%82%D0%B0%20yrchik/%D0%9B%D0%B5%D0%BA%D1%86%D0%B8%D1%8F2.%20%D0%92%D0%B5%D1%80%D1%81%D1%82%D0%B0%D0%BB%D1%8C%D1%89%D0%B8%D0%BA%D0%B0%20%D0%BF%D1%80%D0%BE%D0%B3%D1%80%D0%B0%D0%BC%D0%BC%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5%20(%D0%9F%D1%80%D0%B8%D0%BC%D0%B5%D1%80%E2%84%9626)%20(%20https:%20codepen.io%20yrchik%20pen%20zYGWYQO%20)%20(%20%D0%93%D0%B4%D0%B5%20%D0%BF%D1%80%D0%BE%D0%B1%D0%B5%D0%BB%D1%8B%2C%20%D1%82%D0%B0%D0%BC%20%D0%BA%D0%BE%D1%81%D0%B0%D1%8F%20%D1%87%D0%B5%D1%80%D1%82%D0%BE%D1%87%D0%BA%D0%B0%2C%20%D0%BD%D0%B0%D0%BA%D0%BB%D0%BE%D0%BD%D0%B5%D0%BD%D0%B0%20%D0%B2%D0%BF%D1%80%D0%B0%D0%B2%D0%BE)/Tulips_qvl4sm.jpg" class="showed" alt="">
                <img src="https://res.cloudinary.com/dqdxca8sz/image/upload/v1584037139/%D0%9C%D0%B5%D0%B4%D0%B8%D0%B0%D1%84%D0%B0%D0%B9%D0%BB%D1%8B%20%D0%B4%D0%BB%D1%8F%20Codepen/%D0%9C%D0%B5%D0%B4%D0%B8%D0%BE%D1%84%D0%B0%D0%B9%D0%BB%D1%8B%20%D0%B4%D0%BB%D1%8F%20%D0%B0%D0%BA%D0%BA%D0%B0%D1%83%D0%BD%D1%82%D0%B0%20yrchik/%D0%9B%D0%B5%D0%BA%D1%86%D0%B8%D1%8F2.%20%D0%92%D0%B5%D1%80%D1%81%D1%82%D0%B0%D0%BB%D1%8C%D1%89%D0%B8%D0%BA%D0%B0%20%D0%BF%D1%80%D0%BE%D0%B3%D1%80%D0%B0%D0%BC%D0%BC%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5%20(%D0%9F%D1%80%D0%B8%D0%BC%D0%B5%D1%80%E2%84%9626)%20(%20https:%20codepen.io%20yrchik%20pen%20zYGWYQO%20)%20(%20%D0%93%D0%B4%D0%B5%20%D0%BF%D1%80%D0%BE%D0%B1%D0%B5%D0%BB%D1%8B%2C%20%D1%82%D0%B0%D0%BC%20%D0%BA%D0%BE%D1%81%D0%B0%D1%8F%20%D1%87%D0%B5%D1%80%D1%82%D0%BE%D1%87%D0%BA%D0%B0%2C%20%D0%BD%D0%B0%D0%BA%D0%BB%D0%BE%D0%BD%D0%B5%D0%BD%D0%B0%20%D0%B2%D0%BF%D1%80%D0%B0%D0%B2%D0%BE)/Koala_h7kera.jpg" alt="">
                <img src="https://res.cloudinary.com/dqdxca8sz/image/upload/v1584037140/%D0%9C%D0%B5%D0%B4%D0%B8%D0%B0%D1%84%D0%B0%D0%B9%D0%BB%D1%8B%20%D0%B4%D0%BB%D1%8F%20Codepen/%D0%9C%D0%B5%D0%B4%D0%B8%D0%BE%D1%84%D0%B0%D0%B9%D0%BB%D1%8B%20%D0%B4%D0%BB%D1%8F%20%D0%B0%D0%BA%D0%BA%D0%B0%D1%83%D0%BD%D1%82%D0%B0%20yrchik/%D0%9B%D0%B5%D0%BA%D1%86%D0%B8%D1%8F2.%20%D0%92%D0%B5%D1%80%D1%81%D1%82%D0%B0%D0%BB%D1%8C%D1%89%D0%B8%D0%BA%D0%B0%20%D0%BF%D1%80%D0%BE%D0%B3%D1%80%D0%B0%D0%BC%D0%BC%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5%20(%D0%9F%D1%80%D0%B8%D0%BC%D0%B5%D1%80%E2%84%9626)%20(%20https:%20codepen.io%20yrchik%20pen%20zYGWYQO%20)%20(%20%D0%93%D0%B4%D0%B5%20%D0%BF%D1%80%D0%BE%D0%B1%D0%B5%D0%BB%D1%8B%2C%20%D1%82%D0%B0%D0%BC%20%D0%BA%D0%BE%D1%81%D0%B0%D1%8F%20%D1%87%D0%B5%D1%80%D1%82%D0%BE%D1%87%D0%BA%D0%B0%2C%20%D0%BD%D0%B0%D0%BA%D0%BB%D0%BE%D0%BD%D0%B5%D0%BD%D0%B0%20%D0%B2%D0%BF%D1%80%D0%B0%D0%B2%D0%BE)/Desert_kwdcpd.jpg" alt="">
                <img src="https://res.cloudinary.com/dqdxca8sz/image/upload/v1584037138/%D0%9C%D0%B5%D0%B4%D0%B8%D0%B0%D1%84%D0%B0%D0%B9%D0%BB%D1%8B%20%D0%B4%D0%BB%D1%8F%20Codepen/%D0%9C%D0%B5%D0%B4%D0%B8%D0%BE%D1%84%D0%B0%D0%B9%D0%BB%D1%8B%20%D0%B4%D0%BB%D1%8F%20%D0%B0%D0%BA%D0%BA%D0%B0%D1%83%D0%BD%D1%82%D0%B0%20yrchik/%D0%9B%D0%B5%D0%BA%D1%86%D0%B8%D1%8F2.%20%D0%92%D0%B5%D1%80%D1%81%D1%82%D0%B0%D0%BB%D1%8C%D1%89%D0%B8%D0%BA%D0%B0%20%D0%BF%D1%80%D0%BE%D0%B3%D1%80%D0%B0%D0%BC%D0%BC%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5%20(%D0%9F%D1%80%D0%B8%D0%BC%D0%B5%D1%80%E2%84%9626)%20(%20https:%20codepen.io%20yrchik%20pen%20zYGWYQO%20)%20(%20%D0%93%D0%B4%D0%B5%20%D0%BF%D1%80%D0%BE%D0%B1%D0%B5%D0%BB%D1%8B%2C%20%D1%82%D0%B0%D0%BC%20%D0%BA%D0%BE%D1%81%D0%B0%D1%8F%20%D1%87%D0%B5%D1%80%D1%82%D0%BE%D1%87%D0%BA%D0%B0%2C%20%D0%BD%D0%B0%D0%BA%D0%BB%D0%BE%D0%BD%D0%B5%D0%BD%D0%B0%20%D0%B2%D0%BF%D1%80%D0%B0%D0%B2%D0%BE)/Penguins_hs2ri2.jpg" alt="">
                <img src="https://res.cloudinary.com/dqdxca8sz/image/upload/v1584037137/%D0%9C%D0%B5%D0%B4%D0%B8%D0%B0%D1%84%D0%B0%D0%B9%D0%BB%D1%8B%20%D0%B4%D0%BB%D1%8F%20Codepen/%D0%9C%D0%B5%D0%B4%D0%B8%D0%BE%D1%84%D0%B0%D0%B9%D0%BB%D1%8B%20%D0%B4%D0%BB%D1%8F%20%D0%B0%D0%BA%D0%BA%D0%B0%D1%83%D0%BD%D1%82%D0%B0%20yrchik/%D0%9B%D0%B5%D0%BA%D1%86%D0%B8%D1%8F2.%20%D0%92%D0%B5%D1%80%D1%81%D1%82%D0%B0%D0%BB%D1%8C%D1%89%D0%B8%D0%BA%D0%B0%20%D0%BF%D1%80%D0%BE%D0%B3%D1%80%D0%B0%D0%BC%D0%BC%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5%20(%D0%9F%D1%80%D0%B8%D0%BC%D0%B5%D1%80%E2%84%9626)%20(%20https:%20codepen.io%20yrchik%20pen%20zYGWYQO%20)%20(%20%D0%93%D0%B4%D0%B5%20%D0%BF%D1%80%D0%BE%D0%B1%D0%B5%D0%BB%D1%8B%2C%20%D1%82%D0%B0%D0%BC%20%D0%BA%D0%BE%D1%81%D0%B0%D1%8F%20%D1%87%D0%B5%D1%80%D1%82%D0%BE%D1%87%D0%BA%D0%B0%2C%20%D0%BD%D0%B0%D0%BA%D0%BB%D0%BE%D0%BD%D0%B5%D0%BD%D0%B0%20%D0%B2%D0%BF%D1%80%D0%B0%D0%B2%D0%BE)/Jellyfish_tah6ov.jpg" alt="">
                <img src="https://res.cloudinary.com/dqdxca8sz/image/upload/v1584037138/%D0%9C%D0%B5%D0%B4%D0%B8%D0%B0%D1%84%D0%B0%D0%B9%D0%BB%D1%8B%20%D0%B4%D0%BB%D1%8F%20Codepen/%D0%9C%D0%B5%D0%B4%D0%B8%D0%BE%D1%84%D0%B0%D0%B9%D0%BB%D1%8B%20%D0%B4%D0%BB%D1%8F%20%D0%B0%D0%BA%D0%BA%D0%B0%D1%83%D0%BD%D1%82%D0%B0%20yrchik/%D0%9B%D0%B5%D0%BA%D1%86%D0%B8%D1%8F2.%20%D0%92%D0%B5%D1%80%D1%81%D1%82%D0%B0%D0%BB%D1%8C%D1%89%D0%B8%D0%BA%D0%B0%20%D0%BF%D1%80%D0%BE%D0%B3%D1%80%D0%B0%D0%BC%D0%BC%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5%20(%D0%9F%D1%80%D0%B8%D0%BC%D0%B5%D1%80%E2%84%9626)%20(%20https:%20codepen.io%20yrchik%20pen%20zYGWYQO%20)%20(%20%D0%93%D0%B4%D0%B5%20%D0%BF%D1%80%D0%BE%D0%B1%D0%B5%D0%BB%D1%8B%2C%20%D1%82%D0%B0%D0%BC%20%D0%BA%D0%BE%D1%81%D0%B0%D1%8F%20%D1%87%D0%B5%D1%80%D1%82%D0%BE%D1%87%D0%BA%D0%B0%2C%20%D0%BD%D0%B0%D0%BA%D0%BB%D0%BE%D0%BD%D0%B5%D0%BD%D0%B0%20%D0%B2%D0%BF%D1%80%D0%B0%D0%B2%D0%BE)/Lighthouse_vri9lz.jpg" alt="">
                <img src="https://res.cloudinary.com/dqdxca8sz/image/upload/v1584037137/%D0%9C%D0%B5%D0%B4%D0%B8%D0%B0%D1%84%D0%B0%D0%B9%D0%BB%D1%8B%20%D0%B4%D0%BB%D1%8F%20Codepen/%D0%9C%D0%B5%D0%B4%D0%B8%D0%BE%D1%84%D0%B0%D0%B9%D0%BB%D1%8B%20%D0%B4%D0%BB%D1%8F%20%D0%B0%D0%BA%D0%BA%D0%B0%D1%83%D0%BD%D1%82%D0%B0%20yrchik/%D0%9B%D0%B5%D0%BA%D1%86%D0%B8%D1%8F2.%20%D0%92%D0%B5%D1%80%D1%81%D1%82%D0%B0%D0%BB%D1%8C%D1%89%D0%B8%D0%BA%D0%B0%20%D0%BF%D1%80%D0%BE%D0%B3%D1%80%D0%B0%D0%BC%D0%BC%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5%20(%D0%9F%D1%80%D0%B8%D0%BC%D0%B5%D1%80%E2%84%9626)%20(%20https:%20codepen.io%20yrchik%20pen%20zYGWYQO%20)%20(%20%D0%93%D0%B4%D0%B5%20%D0%BF%D1%80%D0%BE%D0%B1%D0%B5%D0%BB%D1%8B%2C%20%D1%82%D0%B0%D0%BC%20%D0%BA%D0%BE%D1%81%D0%B0%D1%8F%20%D1%87%D0%B5%D1%80%D1%82%D0%BE%D1%87%D0%BA%D0%B0%2C%20%D0%BD%D0%B0%D0%BA%D0%BB%D0%BE%D0%BD%D0%B5%D0%BD%D0%B0%20%D0%B2%D0%BF%D1%80%D0%B0%D0%B2%D0%BE)/Chrysanthemum_ypwftb.jpg" alt="">
                <img src="https://res.cloudinary.com/dqdxca8sz/image/upload/v1584037137/%D0%9C%D0%B5%D0%B4%D0%B8%D0%B0%D1%84%D0%B0%D0%B9%D0%BB%D1%8B%20%D0%B4%D0%BB%D1%8F%20Codepen/%D0%9C%D0%B5%D0%B4%D0%B8%D0%BE%D1%84%D0%B0%D0%B9%D0%BB%D1%8B%20%D0%B4%D0%BB%D1%8F%20%D0%B0%D0%BA%D0%BA%D0%B0%D1%83%D0%BD%D1%82%D0%B0%20yrchik/%D0%9B%D0%B5%D0%BA%D1%86%D0%B8%D1%8F2.%20%D0%92%D0%B5%D1%80%D1%81%D1%82%D0%B0%D0%BB%D1%8C%D1%89%D0%B8%D0%BA%D0%B0%20%D0%BF%D1%80%D0%BE%D0%B3%D1%80%D0%B0%D0%BC%D0%BC%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5%20(%D0%9F%D1%80%D0%B8%D0%BC%D0%B5%D1%80%E2%84%9626)%20(%20https:%20codepen.io%20yrchik%20pen%20zYGWYQO%20)%20(%20%D0%93%D0%B4%D0%B5%20%D0%BF%D1%80%D0%BE%D0%B1%D0%B5%D0%BB%D1%8B%2C%20%D1%82%D0%B0%D0%BC%20%D0%BA%D0%BE%D1%81%D0%B0%D1%8F%20%D1%87%D0%B5%D1%80%D1%82%D0%BE%D1%87%D0%BA%D0%B0%2C%20%D0%BD%D0%B0%D0%BA%D0%BB%D0%BE%D0%BD%D0%B5%D0%BD%D0%B0%20%D0%B2%D0%BF%D1%80%D0%B0%D0%B2%D0%BE)/Hydrangeas_jjvrao.jpg" alt="">
            </div>
            <div class="buttons">
                <input type="button" value="Назад" class="prev">
                <input type="button" value="Вперёд" class="next">
            </div>
        </div>
        
       
         
    </body>
</html>














 
    <body>
        <div class="gallery gallery-1">
            <div class="photos">
                <img src="https://res.cloudinary.com/dqdxca8sz/image/upload/v1584037136/%D0%9C%D0%B5%D0%B4%D0%B8%D0%B0%D1%84%D0%B0%D0%B9%D0%BB%D1%8B%20%D0%B4%D0%BB%D1%8F%20Codepen/%D0%9C%D0%B5%D0%B4%D0%B8%D0%BE%D1%84%D0%B0%D0%B9%D0%BB%D1%8B%20%D0%B4%D0%BB%D1%8F%20%D0%B0%D0%BA%D0%BA%D0%B0%D1%83%D0%BD%D1%82%D0%B0%20yrchik/%D0%9B%D0%B5%D0%BA%D1%86%D0%B8%D1%8F2.%20%D0%92%D0%B5%D1%80%D1%81%D1%82%D0%B0%D0%BB%D1%8C%D1%89%D0%B8%D0%BA%D0%B0%20%D0%BF%D1%80%D0%BE%D0%B3%D1%80%D0%B0%D0%BC%D0%BC%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5%20(%D0%9F%D1%80%D0%B8%D0%BC%D0%B5%D1%80%E2%84%9626)%20(%20https:%20codepen.io%20yrchik%20pen%20zYGWYQO%20)%20(%20%D0%93%D0%B4%D0%B5%20%D0%BF%D1%80%D0%BE%D0%B1%D0%B5%D0%BB%D1%8B%2C%20%D1%82%D0%B0%D0%BC%20%D0%BA%D0%BE%D1%81%D0%B0%D1%8F%20%D1%87%D0%B5%D1%80%D1%82%D0%BE%D1%87%D0%BA%D0%B0%2C%20%D0%BD%D0%B0%D0%BA%D0%BB%D0%BE%D0%BD%D0%B5%D0%BD%D0%B0%20%D0%B2%D0%BF%D1%80%D0%B0%D0%B2%D0%BE)/Tulips_qvl4sm.jpg" class="showed" alt="">
                <img src="https://res.cloudinary.com/dqdxca8sz/image/upload/v1584037139/%D0%9C%D0%B5%D0%B4%D0%B8%D0%B0%D1%84%D0%B0%D0%B9%D0%BB%D1%8B%20%D0%B4%D0%BB%D1%8F%20Codepen/%D0%9C%D0%B5%D0%B4%D0%B8%D0%BE%D1%84%D0%B0%D0%B9%D0%BB%D1%8B%20%D0%B4%D0%BB%D1%8F%20%D0%B0%D0%BA%D0%BA%D0%B0%D1%83%D0%BD%D1%82%D0%B0%20yrchik/%D0%9B%D0%B5%D0%BA%D1%86%D0%B8%D1%8F2.%20%D0%92%D0%B5%D1%80%D1%81%D1%82%D0%B0%D0%BB%D1%8C%D1%89%D0%B8%D0%BA%D0%B0%20%D0%BF%D1%80%D0%BE%D0%B3%D1%80%D0%B0%D0%BC%D0%BC%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5%20(%D0%9F%D1%80%D0%B8%D0%BC%D0%B5%D1%80%E2%84%9626)%20(%20https:%20codepen.io%20yrchik%20pen%20zYGWYQO%20)%20(%20%D0%93%D0%B4%D0%B5%20%D0%BF%D1%80%D0%BE%D0%B1%D0%B5%D0%BB%D1%8B%2C%20%D1%82%D0%B0%D0%BC%20%D0%BA%D0%BE%D1%81%D0%B0%D1%8F%20%D1%87%D0%B5%D1%80%D1%82%D0%BE%D1%87%D0%BA%D0%B0%2C%20%D0%BD%D0%B0%D0%BA%D0%BB%D0%BE%D0%BD%D0%B5%D0%BD%D0%B0%20%D0%B2%D0%BF%D1%80%D0%B0%D0%B2%D0%BE)/Koala_h7kera.jpg" alt="">
                <img src="https://res.cloudinary.com/dqdxca8sz/image/upload/v1584037140/%D0%9C%D0%B5%D0%B4%D0%B8%D0%B0%D1%84%D0%B0%D0%B9%D0%BB%D1%8B%20%D0%B4%D0%BB%D1%8F%20Codepen/%D0%9C%D0%B5%D0%B4%D0%B8%D0%BE%D1%84%D0%B0%D0%B9%D0%BB%D1%8B%20%D0%B4%D0%BB%D1%8F%20%D0%B0%D0%BA%D0%BA%D0%B0%D1%83%D0%BD%D1%82%D0%B0%20yrchik/%D0%9B%D0%B5%D0%BA%D1%86%D0%B8%D1%8F2.%20%D0%92%D0%B5%D1%80%D1%81%D1%82%D0%B0%D0%BB%D1%8C%D1%89%D0%B8%D0%BA%D0%B0%20%D0%BF%D1%80%D0%BE%D0%B3%D1%80%D0%B0%D0%BC%D0%BC%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5%20(%D0%9F%D1%80%D0%B8%D0%BC%D0%B5%D1%80%E2%84%9626)%20(%20https:%20codepen.io%20yrchik%20pen%20zYGWYQO%20)%20(%20%D0%93%D0%B4%D0%B5%20%D0%BF%D1%80%D0%BE%D0%B1%D0%B5%D0%BB%D1%8B%2C%20%D1%82%D0%B0%D0%BC%20%D0%BA%D0%BE%D1%81%D0%B0%D1%8F%20%D1%87%D0%B5%D1%80%D1%82%D0%BE%D1%87%D0%BA%D0%B0%2C%20%D0%BD%D0%B0%D0%BA%D0%BB%D0%BE%D0%BD%D0%B5%D0%BD%D0%B0%20%D0%B2%D0%BF%D1%80%D0%B0%D0%B2%D0%BE)/Desert_kwdcpd.jpg" alt="">
                <img src="https://res.cloudinary.com/dqdxca8sz/image/upload/v1584037138/%D0%9C%D0%B5%D0%B4%D0%B8%D0%B0%D1%84%D0%B0%D0%B9%D0%BB%D1%8B%20%D0%B4%D0%BB%D1%8F%20Codepen/%D0%9C%D0%B5%D0%B4%D0%B8%D0%BE%D1%84%D0%B0%D0%B9%D0%BB%D1%8B%20%D0%B4%D0%BB%D1%8F%20%D0%B0%D0%BA%D0%BA%D0%B0%D1%83%D0%BD%D1%82%D0%B0%20yrchik/%D0%9B%D0%B5%D0%BA%D1%86%D0%B8%D1%8F2.%20%D0%92%D0%B5%D1%80%D1%81%D1%82%D0%B0%D0%BB%D1%8C%D1%89%D0%B8%D0%BA%D0%B0%20%D0%BF%D1%80%D0%BE%D0%B3%D1%80%D0%B0%D0%BC%D0%BC%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5%20(%D0%9F%D1%80%D0%B8%D0%BC%D0%B5%D1%80%E2%84%9626)%20(%20https:%20codepen.io%20yrchik%20pen%20zYGWYQO%20)%20(%20%D0%93%D0%B4%D0%B5%20%D0%BF%D1%80%D0%BE%D0%B1%D0%B5%D0%BB%D1%8B%2C%20%D1%82%D0%B0%D0%BC%20%D0%BA%D0%BE%D1%81%D0%B0%D1%8F%20%D1%87%D0%B5%D1%80%D1%82%D0%BE%D1%87%D0%BA%D0%B0%2C%20%D0%BD%D0%B0%D0%BA%D0%BB%D0%BE%D0%BD%D0%B5%D0%BD%D0%B0%20%D0%B2%D0%BF%D1%80%D0%B0%D0%B2%D0%BE)/Penguins_hs2ri2.jpg" alt="">
                <img src="https://res.cloudinary.com/dqdxca8sz/image/upload/v1584037137/%D0%9C%D0%B5%D0%B4%D0%B8%D0%B0%D1%84%D0%B0%D0%B9%D0%BB%D1%8B%20%D0%B4%D0%BB%D1%8F%20Codepen/%D0%9C%D0%B5%D0%B4%D0%B8%D0%BE%D1%84%D0%B0%D0%B9%D0%BB%D1%8B%20%D0%B4%D0%BB%D1%8F%20%D0%B0%D0%BA%D0%BA%D0%B0%D1%83%D0%BD%D1%82%D0%B0%20yrchik/%D0%9B%D0%B5%D0%BA%D1%86%D0%B8%D1%8F2.%20%D0%92%D0%B5%D1%80%D1%81%D1%82%D0%B0%D0%BB%D1%8C%D1%89%D0%B8%D0%BA%D0%B0%20%D0%BF%D1%80%D0%BE%D0%B3%D1%80%D0%B0%D0%BC%D0%BC%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5%20(%D0%9F%D1%80%D0%B8%D0%BC%D0%B5%D1%80%E2%84%9626)%20(%20https:%20codepen.io%20yrchik%20pen%20zYGWYQO%20)%20(%20%D0%93%D0%B4%D0%B5%20%D0%BF%D1%80%D0%BE%D0%B1%D0%B5%D0%BB%D1%8B%2C%20%D1%82%D0%B0%D0%BC%20%D0%BA%D0%BE%D1%81%D0%B0%D1%8F%20%D1%87%D0%B5%D1%80%D1%82%D0%BE%D1%87%D0%BA%D0%B0%2C%20%D0%BD%D0%B0%D0%BA%D0%BB%D0%BE%D0%BD%D0%B5%D0%BD%D0%B0%20%D0%B2%D0%BF%D1%80%D0%B0%D0%B2%D0%BE)/Jellyfish_tah6ov.jpg" alt="">
                <img src="https://res.cloudinary.com/dqdxca8sz/image/upload/v1584037138/%D0%9C%D0%B5%D0%B4%D0%B8%D0%B0%D1%84%D0%B0%D0%B9%D0%BB%D1%8B%20%D0%B4%D0%BB%D1%8F%20Codepen/%D0%9C%D0%B5%D0%B4%D0%B8%D0%BE%D1%84%D0%B0%D0%B9%D0%BB%D1%8B%20%D0%B4%D0%BB%D1%8F%20%D0%B0%D0%BA%D0%BA%D0%B0%D1%83%D0%BD%D1%82%D0%B0%20yrchik/%D0%9B%D0%B5%D0%BA%D1%86%D0%B8%D1%8F2.%20%D0%92%D0%B5%D1%80%D1%81%D1%82%D0%B0%D0%BB%D1%8C%D1%89%D0%B8%D0%BA%D0%B0%20%D0%BF%D1%80%D0%BE%D0%B3%D1%80%D0%B0%D0%BC%D0%BC%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5%20(%D0%9F%D1%80%D0%B8%D0%BC%D0%B5%D1%80%E2%84%9626)%20(%20https:%20codepen.io%20yrchik%20pen%20zYGWYQO%20)%20(%20%D0%93%D0%B4%D0%B5%20%D0%BF%D1%80%D0%BE%D0%B1%D0%B5%D0%BB%D1%8B%2C%20%D1%82%D0%B0%D0%BC%20%D0%BA%D0%BE%D1%81%D0%B0%D1%8F%20%D1%87%D0%B5%D1%80%D1%82%D0%BE%D1%87%D0%BA%D0%B0%2C%20%D0%BD%D0%B0%D0%BA%D0%BB%D0%BE%D0%BD%D0%B5%D0%BD%D0%B0%20%D0%B2%D0%BF%D1%80%D0%B0%D0%B2%D0%BE)/Lighthouse_vri9lz.jpg" alt="">
                <img src="https://res.cloudinary.com/dqdxca8sz/image/upload/v1584037137/%D0%9C%D0%B5%D0%B4%D0%B8%D0%B0%D1%84%D0%B0%D0%B9%D0%BB%D1%8B%20%D0%B4%D0%BB%D1%8F%20Codepen/%D0%9C%D0%B5%D0%B4%D0%B8%D0%BE%D1%84%D0%B0%D0%B9%D0%BB%D1%8B%20%D0%B4%D0%BB%D1%8F%20%D0%B0%D0%BA%D0%BA%D0%B0%D1%83%D0%BD%D1%82%D0%B0%20yrchik/%D0%9B%D0%B5%D0%BA%D1%86%D0%B8%D1%8F2.%20%D0%92%D0%B5%D1%80%D1%81%D1%82%D0%B0%D0%BB%D1%8C%D1%89%D0%B8%D0%BA%D0%B0%20%D0%BF%D1%80%D0%BE%D0%B3%D1%80%D0%B0%D0%BC%D0%BC%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5%20(%D0%9F%D1%80%D0%B8%D0%BC%D0%B5%D1%80%E2%84%9626)%20(%20https:%20codepen.io%20yrchik%20pen%20zYGWYQO%20)%20(%20%D0%93%D0%B4%D0%B5%20%D0%BF%D1%80%D0%BE%D0%B1%D0%B5%D0%BB%D1%8B%2C%20%D1%82%D0%B0%D0%BC%20%D0%BA%D0%BE%D1%81%D0%B0%D1%8F%20%D1%87%D0%B5%D1%80%D1%82%D0%BE%D1%87%D0%BA%D0%B0%2C%20%D0%BD%D0%B0%D0%BA%D0%BB%D0%BE%D0%BD%D0%B5%D0%BD%D0%B0%20%D0%B2%D0%BF%D1%80%D0%B0%D0%B2%D0%BE)/Chrysanthemum_ypwftb.jpg" alt="">
                <img src="https://res.cloudinary.com/dqdxca8sz/image/upload/v1584037137/%D0%9C%D0%B5%D0%B4%D0%B8%D0%B0%D1%84%D0%B0%D0%B9%D0%BB%D1%8B%20%D0%B4%D0%BB%D1%8F%20Codepen/%D0%9C%D0%B5%D0%B4%D0%B8%D0%BE%D1%84%D0%B0%D0%B9%D0%BB%D1%8B%20%D0%B4%D0%BB%D1%8F%20%D0%B0%D0%BA%D0%BA%D0%B0%D1%83%D0%BD%D1%82%D0%B0%20yrchik/%D0%9B%D0%B5%D0%BA%D1%86%D0%B8%D1%8F2.%20%D0%92%D0%B5%D1%80%D1%81%D1%82%D0%B0%D0%BB%D1%8C%D1%89%D0%B8%D0%BA%D0%B0%20%D0%BF%D1%80%D0%BE%D0%B3%D1%80%D0%B0%D0%BC%D0%BC%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5%20(%D0%9F%D1%80%D0%B8%D0%BC%D0%B5%D1%80%E2%84%9626)%20(%20https:%20codepen.io%20yrchik%20pen%20zYGWYQO%20)%20(%20%D0%93%D0%B4%D0%B5%20%D0%BF%D1%80%D0%BE%D0%B1%D0%B5%D0%BB%D1%8B%2C%20%D1%82%D0%B0%D0%BC%20%D0%BA%D0%BE%D1%81%D0%B0%D1%8F%20%D1%87%D0%B5%D1%80%D1%82%D0%BE%D1%87%D0%BA%D0%B0%2C%20%D0%BD%D0%B0%D0%BA%D0%BB%D0%BE%D0%BD%D0%B5%D0%BD%D0%B0%20%D0%B2%D0%BF%D1%80%D0%B0%D0%B2%D0%BE)/Hydrangeas_jjvrao.jpg" alt="">
            </div>
            <div class="buttons">
                <input type="button" value="Назад" class="prev">
                <input type="button" value="Вперёд" class="next">
            </div>
        </div>
        
       
         
    </body>
</html>

html, body, ul, li{
    margin: 0;
    padding: 0;
}

.gallery{
    width: 860px;
    margin: 0 auto;
    text-align: center;
}

.gallery .photos{
    position: relative;
    height: 670px;
}

.gallery .photos img{
    position: absolute;
    left: 0;
    width: 0;
    transition: opacity 1s;
}

.gallery .photos img.showed{
    
    width: 100%;
}

$(function() {
    
    new Slider({
        images: '.gallery-1 img',
        btnPrev: '.gallery-1 .buttons .prev',
        btnNext: '.gallery-1 .buttons .next',
        auto: false
    });
    
  new Slider({
        images: '.gallery-2 img',
        btnPrev: '.gallery-2 .buttons .prev',
        btnNext: '.gallery-2 .buttons .next',
        auto: true,
        rate: 2000
    });
});


function Slider(obj) {
    
  this.images = $(obj.images);  
  this.auto = obj.auto;
  this.btnPrev = obj.btnPrev;
  this.btnNext = obj.btnNext;
    this.rate = obj.rate || 1000;
  
  var i = 0;
    
    var slider = this;

  this.prev = function () {
    slider.images.eq(i).animate({
            width: 0 
        }, 500);
    i--;

    if (i < 0) {
      i = slider.images.length - 1;
    }

    slider.images.eq(i).animate({
            width: '100%'
        }, 500);
  }

  this.next = function () {
    slider.images.eq(i).animate({
            width: 0, 
        }, 500);
    i++;

    if (i >= slider.images.length) {
      i = 0;
    }

    slider.images.eq(i).css({ "left": "0" }).animate({
            width: '100%', 
        }, 500);
  }
  
    $(slider.btnPrev).on('click', function(){ slider.prev();});
    $(slider.btnNext).on('click', function(){ slider.next();});
    
  if(slider.auto) {
        setInterval(slider.next, slider.rate);
    }
};

This Pen is owned by freelancetesting on CodePen.

See more by @freelancetesting on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js