Как сделать, чтобы при нажатии на кнопки менялись картинки?

Oleg2002pr, был бы очень благодарен узнать хотя бы образец как сделать, а дальше буду разбираться, спасибо большое)

Как сделать, чтобы при нажатии на кнопки менялись картинки?

Oleg2002pr, вот этот код который прислал - работает, но когда добавляю второй блок с такими же кнопками, то уже в первом блоке и во втором блоке кнопки не реагируют на нажатия
а мне надо сделать так чтоб при нажатии разноцветных кружков менялись картинки

Как сделать, чтобы при нажатии на кнопки менялись картинки?

Oleg2002pr, я просто нашел этот код в интернете

<img name="img" src="путь к фото">
<input type="button" onclick="javascript:img.src='путь к фото'">
<input type="button" onclick="javascript:img.src='путь к фото'">

Как сделать, чтобы при нажатии на кнопки менялись картинки?

Oleg2002pr, у меня в script.js только $('.banner_slider').slick(); это для слайдера другой секции

Можно ли из фоновых бэкграундов сделать slick slider?

Ankhena, сам справился) спасибо, высоту не в % написал, а в пикселях 950пкс как и сама высота изображения

Как сделать slick slider заднего фона?

AntonCinet, решение оказалось простым, в html в каждом div.slide добавил style="bacground-image: url(путь к картинке);
а в CSS уже эти классы slide-1 и тд добавил стили

<div class="carousel">
            <div class="banner_slider">
                <div class="slide-1" style="background-image: url(img/Background2.png);">
                    <div class="text">
                        <h2 class="title">
                            Множество оригинальных,
                                непохожих на европейские
                                модели рюкзаков
                        </h2>
                    </div>
                </div>

                <div class="slide-2" style="background-image: url(img/Background2.2.jpg.png);">
                    <div class="text">
                        <h2 class="title">
                            Это рюкзаки, которые вне
                            законов моды: они подходят
                            людям любого возраста и
                            вкусовых предпочтений
                        </h2>
                    </div>
                </div>

                <div class="slide-3" style="background-image: url(img/Background2.3.png);">
                    <div class="text">
                        <h2 class="title">
                            Дизайнеры моделируют и
                            сочетают различные ткани 
                            и материалы
                        </h2>
                    </div>
                </div>

                <div class="slide-4" style="background-image: url(img/Background2.4.png);">
                    <div class="text">
                        <h2 class="title">
                            Небольшого веса, однако,
                            в них отлично помещаются
                            самые необходимые
                            личные вещи
                        </h2>
                    </div>
                </div>
            </div>

.carousel {
    .banner_slider {
        .slide-1 {
            background-size:cover;
            background-position: center;
            background-repeat: no-repeat;
            height: 850px;
            width: 100%;
        }
        .slide-2 {
            background-size:cover;
            background-position: center;
            background-repeat: no-repeat;
            height: 850px;
            width: 100%;
        }
        .slide-3 {
            background-size:cover;
            background-position: center;
            background-repeat: no-repeat;
            height: 850px;
            width: 100%;
        }
        .slide-4 {
            background-size:cover;
            background-position: center;
            background-repeat: no-repeat;
            height: 850px;
            width: 100%;
        }

Можно ли из фоновых бэкграундов сделать slick slider?

пробовал так сделать не помогло, бэкграунд не растягивается по высоте больше, чем размер текста (то есть изображение почему то становится просто бэкграундом для текста)
ниже прикрепил код, может там сможете найти какие то ошибки? повторяю пробовал добавлять позиции релатив/абсолют не помогло

Как сделать slick slider заднего фона?

разницы не увидел, ничего не меняется

Можно ли из фоновых бэкграундов сделать slick slider?

Ankhena, изображение не растягивается по высоте, почему то становится бэкграундом для текста

<div class="carousel">
        <div class="banner_slider_wrap">
            <div class="banner_slider">
                <div class="slide-1">
                    <h2 class="title">
                        Множество оригинальных,
                            непохожих на европейские
                            модели рюкзаков
                    </h2>
                </div>

                <div class="slide-2">
                    <h2 class="title">
                        Множество оригинальных,
                            непохожих на европейские
                            модели рюкзаков
                    </h2>
                </div>
                <div class="slide-3">
                    <h2 class="title">
                        Множество оригинальных,
                            непохожих на европейские
                            модели рюкзаков
                    </h2>
                </div>
                <div class="slide-4">
                    <h2 class="title">
                        Множество оригинальных,
                            непохожих на европейские
                            модели рюкзаков
                    </h2>
                </div>
            </div>
        </div>
    </div>

.carousel {
    .banner_slider {
        width: 100%;
        height: 100%;
        .slide-1 {
            background: url(../../img/Background2.png) center (center/cover) no-repeat;
            width: 100%;
            height: 100%;
        }
        .slide-2 {
            background: url(../../img/Background2.2.jpg.png) center (center/cover) no-repeat;
            width: 100%;
            height: 100%;
        }
        .slide-3 {
            background: url(../../img/Background2.3.png) center (center/cover) no-repeat;
            width: 100%;
            height: 100%;
        }
        .slide-4 {
            background: url(../../img/Background2.4.png) center (center/cover) no-repeat;
            width: 100%;
            height: 100%;
        }
         .slick-next {
            background: url(../../icons/knopka_vpravo_139.png) center (center/cover) no-repeat;
            font-size: 0px;
            opacity: 0.6;
            background-size: 80%;
            border: 0px;
            width: 118px;
            height: 108px;
            position: absolute;
            right: 250px;
            top: 38%;
            margin-top: -73px;      
            z-index: 10;      
        }
        .slick-prev {
            background: url(../../icons/knopka_vlevo_138.png) center (center/cover) no-repeat;
            font-size: 0px;
            background-size: 80%;
            opacity: 0.6;
            border: 0px;
            width: 118px;
            height: 108px;
            position: absolute;
            left: 250px;
            top: 38%;
            margin-top: -70px;    
            z-index: 10;        
        }

Как разместить изображение сверху и по центру от текста?

approximate solution, telegram: osimone

Как разместить изображение сверху и по центру от текста?

approximate solution,
вот здесь хочу расположить

Как разместить изображение сверху и по центру от текста?

я хочу сделать изображение над текстом если разрешение экрана максимум 767px
мне просто нужно понять какое свойство позволит это сделать

попробовал ваш вариант, не получается

Как разместить изображение сверху и по центру от текста?

<section class="feed">
            <div class="container">
                <div class="tittle">отзывы клиентов</div>
                    <div class="feed__first">
                        <img src="img/irina.png" alt="irina" class="feed__img">
                        <div class="feed__text">
                            <div class="feed__subtitle">Ирина Иванченко</div>
                            <div class="feed__count">2 полумарафона</div>             
                            <div class="feed__descr">Не знала, что себе купить - обратилась к ребятам из RunSmart - подобрали пульсометр, который подошёл именно под мои цели и финансовые возможности.
                                Через некоторое время решила обновить гаджет - не раздумывая обратилась туда же.
                                <br><br>
                                
                                Новые цели - новый гаджет!
                                <br><br>
                                Спасибо, RunSmart!    
                        </div>           
                    </div>

css

.feed {
    padding-bottom: 71px;
    &__first {
        margin-top: 100px;
        &:nth-child(2) {
            margin-top: 70px;
        }
   }
    &__img {
        float: left;
        width: 169px;
        height: 169px;
        margin-right: 60px;
    }   
    &__text {
        margin-left: 62px;
        padding-right: 60px;
    }
    &__subtitle {
        font-size: 18px;
        font-weight: 700;
        color: #0d0d0d;
    }
    &__count {
        font-size: 14px;
        line-height: 1.2;
        font-weight: 500;
        color: #646464;
    }
    &__descr {
        margin-top: 10px;
        font-size: 16px;
        line-height: 1.2;
        font-weight: 300;
        color: #0d0d0d;
    }

}

дизайна блока нету, сам пытаюсь сделать, но не получается круглое изображение разместить над текстом