Блог

Главная - Вопросы по программированию - Как добавить карусель на сайты Google?

Как добавить карусель на сайты Google?

#slider #carousel

#слайдер #карусель

Вопрос:

Чего я пытаюсь добиться, так это создать привлекательную карусель. Тот, который в настоящее время используется на сайтах Google, мне не нравится. Я использовал приведенный ниже код для карусели с логотипом, но мне нужны только изображения. Я новичок в программировании, и мне нужна помощь более опытных программистов, которые точно знают, что делать и почему? Я хочу понимать, что я делаю. Я буду признателен за любую помощь, которую я могу получить по этому вопросу. Заранее благодарю.

 <div class=”container”>
    <!--<h2> Our Partners/ Our Clients</h2> →
    <section class=”customer-logos slider”>
        <div class=”slide”><img src=”link”</div>
        <div class=”slide”><img src=”link”</div>
        <div class=”slide”><img src=”link”</div>
        <div class=”slide”><img src=”link”</div>
        <div class=”slide”><img src=”link”</div>
        <div class=”slide”><img src=”link”</div>
        <div class=”slide”><img src=”link”</div>
        <div class=”slide”><img src=”link”</div>
        <div class=”slide”><img src=”link”</div>
        <div class=”slide”><img src=”link”</div>
    </section>
</div>
    <script>
        $ (document) .ready(function){
    $ (‘ .customer-logos’) .slick ({
        slicktoshow: 4;
        slidestoscroll: 1;
        autoplay: true;
        autoplayspeed: 1500;
        arrows: false;
        dots: false;
        pauseonhover: false;
        responsive: [{
            Breakpoint: 768;
            settings: {
                slidestoshow: 4;
                }
            }]
        }];
    }];
    </script>  
 <!DOCTYPE html>
<html>
<head>
<link href:”//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/boostrap.min.css” rel=”stylesheet” id=”bootstrap-css>
<script src=”//madcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootsrap.min.js”</script>
<script src=”//cdnjs.cloudfare.com/ajax/libs/jquery/3.2.1/jquery.min.js”></script>
<script src=”https://cdnjs.cloudfare.com/ajax/libs/slick-carousel/1.6.0/slick.js”></script>
<style>
body{
    overflow: hidden;
}
    h2{
    text-align: center;
    padding: 20px;
}
 / * Slider */
.slick-slider {

}
.slick-slider img{
    width:  100%;
}
.slick-slider
{
    position: relative;
    display: block;
    box-sizing: border-box;
    -webkit-user-select: none;
    -moz-user-select: none;
    ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -Khtml-user-select: none;
    -ms-touch-action: pan-y;
        touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}
.slick-list
{
    position: relative;
    display: block;
    overflow: hidden;
    margin: 0;
    padding: 0;
}
.slick-list: focus
{
    outline:none;
}
.slick-list .dragging
{
    cursor: pointer;
    cursor: hand;
}
.slick-slider .slick-track,
.slick-slider .slick-list
{
    -webkit-transform: translate3d(0,0,0);
    -moz-tranform: translate3d(0,0,0);
    -ms-transform: translate3d(0,0,0);
    -0-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0);
}
.slick-track
{
    position: relative;
    top: 0;
    left: 0;
    display: block;
}
.slick-track: before;
.slick-track: after;
{
    display:table;
    content: “”;
}
.slick-track: after
{
    clear: both;
}
.slick-loading .slick-track
{
    visibility: hidden;
}
.slick-verticial .slick-slide
{
    display: none;
    height: auto;
    border: 1 px solid transparent;
}
.slick-arrow .slick-hidden{
    display: none;
}
</style>
</head>
<body>
<div class=”container”>
    
</body>
</html>

Комментарии:

1. рассмотрите возможность добавления некоторых фрагментов кода, если вы уже начали работать над этим. если нет, лучше всего начать с руководства по сайтам Google, попробуйте несколько вещей, вернитесь, когда застряли. support.google.com/sites/answer/6372878?hl=en

2. Билл, ты новичок, поэтому я уверен, что это сбивает с толку. 1) отредактируйте свой вопрос, и вы поместите свой код в блок кода. 2) используйте комментарии для ответа мне и другим участникам сообщества 🙂

3. Да, это очень запутанно и все новое для меня. Я отредактировал свой вопрос и вставил свой код, который я использовал. Но я хочу добавить изображения вместо логотипов.

4. да, все в порядке. мы здесь, чтобы помочь. Хорошо, итак, вы можете попробовать запустить свой код в code sandbox? если вы новичок в code sandbox, сейчас самое время начать его использовать. codesandbox.io Кроме того, весь этот код не выполняется. Я не думаю, что это полный код. Я пытаюсь поместить его в codesandbox, но получаю так много ошибок.

5. Что мне делать? Как мне запустить его в песочнице? Для меня это все ново.