Problem on adding Bootstrap carousel component

I'am praticing and learning about bootstrap and at this moment i am trying to adding a carousel in my website.

I picked a example from Bootstrap that haves on the first DIV, the id="carouselExampleSlidesOnly", with this ID, the carousel works perfectly.

But i want to remove the "carouselExampleSlidesOnly" and change for another ID name. When i do that changing to "myCarousel", the code stop working.

I tried to add a javascript code with the ID name, but even with that, the carousel not work, and shows a static image.

<script>

$('#myCarousel').carousel({

  interval: 3000,

  pause: null,

})

</script>



   <div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="3000" data-pause="null">

    <div class="carousel-inner">

        <div class="carousel-item active">

            <img class="d-block w-100" src="assets/images/slide1.png" alt="First slide">

            <div class="container">

                <div class="slider-text">

                    <h2>Lorem Ipsum is simply dummy text.</h2>

                    <p>ndustry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer.</p>

                </div>



            </div>

        </div>



        <div class="carousel-item">

            <img class="d-block w-100" src="assets/images/slide2.png" alt="Second slide">

            <div class="container">

                <div class="slider-text">

                    <h2>Lorem Ipsum is simply dummy text.</h2>

                    <p>ndustry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer.</p>

                </div>



            </div>

        </div>



    </div>

    <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">

    <span class="carousel-control-prev-icon" aria-hidden="true"></span>

    <span class="sr-only">Previous</span>

  </a>

    <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">

    <span class="carousel-control-next-icon" aria-hidden="true"></span>

    <span class="sr-only">Next</span>

  </a>

</div>

edited Jan 20 at 0:33

asked Jan 19 at 23:57

Leonardo Tandeli

Hi, I can't see what you need help with could you explain a little more, what is it you are trying to do and what isn't working with it?

– Pheonix2105
Jan 20 at 0:24

Here is a code pen, is this what you are trying to achieve? codepen.io/anon/pen/qLeoqQ?editors=1111

– Pheonix2105
Jan 20 at 0:32

Yes, exactly that! thank you.

– Leonardo Tandeli
Jan 20 at 0:48

add a comment |

I'am praticing and learning about bootstrap and at this moment i am trying to adding a carousel in my website.

I picked a example from Bootstrap that haves on the first DIV, the id="carouselExampleSlidesOnly", with this ID, the carousel works perfectly.

But i want to remove the "carouselExampleSlidesOnly" and change for another ID name. When i do that changing to "myCarousel", the code stop working.

I tried to add a javascript code with the ID name, but even with that, the carousel not work, and shows a static image.

<script>

$('#myCarousel').carousel({

  interval: 3000,

  pause: null,

})

</script>



   <div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="3000" data-pause="null">

    <div class="carousel-inner">

        <div class="carousel-item active">

            <img class="d-block w-100" src="assets/images/slide1.png" alt="First slide">

            <div class="container">

                <div class="slider-text">

                    <h2>Lorem Ipsum is simply dummy text.</h2>

                    <p>ndustry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer.</p>

                </div>



            </div>

        </div>



        <div class="carousel-item">

            <img class="d-block w-100" src="assets/images/slide2.png" alt="Second slide">

            <div class="container">

                <div class="slider-text">

                    <h2>Lorem Ipsum is simply dummy text.</h2>

                    <p>ndustry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer.</p>

                </div>



            </div>

        </div>



    </div>

    <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">

    <span class="carousel-control-prev-icon" aria-hidden="true"></span>

    <span class="sr-only">Previous</span>

  </a>

    <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">

    <span class="carousel-control-next-icon" aria-hidden="true"></span>

    <span class="sr-only">Next</span>

  </a>

</div>

edited Jan 20 at 0:33

asked Jan 19 at 23:57

Leonardo Tandeli

Hi, I can't see what you need help with could you explain a little more, what is it you are trying to do and what isn't working with it?

– Pheonix2105
Jan 20 at 0:24

Here is a code pen, is this what you are trying to achieve? codepen.io/anon/pen/qLeoqQ?editors=1111

– Pheonix2105
Jan 20 at 0:32

Yes, exactly that! thank you.

– Leonardo Tandeli
Jan 20 at 0:48

add a comment |

I'am praticing and learning about bootstrap and at this moment i am trying to adding a carousel in my website.

I picked a example from Bootstrap that haves on the first DIV, the id="carouselExampleSlidesOnly", with this ID, the carousel works perfectly.

But i want to remove the "carouselExampleSlidesOnly" and change for another ID name. When i do that changing to "myCarousel", the code stop working.

I tried to add a javascript code with the ID name, but even with that, the carousel not work, and shows a static image.

<script>

$('#myCarousel').carousel({

  interval: 3000,

  pause: null,

})

</script>



   <div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="3000" data-pause="null">

    <div class="carousel-inner">

        <div class="carousel-item active">

            <img class="d-block w-100" src="assets/images/slide1.png" alt="First slide">

            <div class="container">

                <div class="slider-text">

                    <h2>Lorem Ipsum is simply dummy text.</h2>

                    <p>ndustry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer.</p>

                </div>



            </div>

        </div>



        <div class="carousel-item">

            <img class="d-block w-100" src="assets/images/slide2.png" alt="Second slide">

            <div class="container">

                <div class="slider-text">

                    <h2>Lorem Ipsum is simply dummy text.</h2>

                    <p>ndustry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer.</p>

                </div>



            </div>

        </div>



    </div>

    <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">

    <span class="carousel-control-prev-icon" aria-hidden="true"></span>

    <span class="sr-only">Previous</span>

  </a>

    <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">

    <span class="carousel-control-next-icon" aria-hidden="true"></span>

    <span class="sr-only">Next</span>

  </a>

</div>

edited Jan 20 at 0:33

asked Jan 19 at 23:57

Leonardo Tandeli

I'am praticing and learning about bootstrap and at this moment i am trying to adding a carousel in my website.

I picked a example from Bootstrap that haves on the first DIV, the id="carouselExampleSlidesOnly", with this ID, the carousel works perfectly.

But i want to remove the "carouselExampleSlidesOnly" and change for another ID name. When i do that changing to "myCarousel", the code stop working.

I tried to add a javascript code with the ID name, but even with that, the carousel not work, and shows a static image.

<script>

$('#myCarousel').carousel({

  interval: 3000,

  pause: null,

})

</script>



   <div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="3000" data-pause="null">

    <div class="carousel-inner">

        <div class="carousel-item active">

            <img class="d-block w-100" src="assets/images/slide1.png" alt="First slide">

            <div class="container">

                <div class="slider-text">

                    <h2>Lorem Ipsum is simply dummy text.</h2>

                    <p>ndustry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer.</p>

                </div>



            </div>

        </div>



        <div class="carousel-item">

            <img class="d-block w-100" src="assets/images/slide2.png" alt="Second slide">

            <div class="container">

                <div class="slider-text">

                    <h2>Lorem Ipsum is simply dummy text.</h2>

                    <p>ndustry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer.</p>

                </div>



            </div>

        </div>



    </div>

    <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">

    <span class="carousel-control-prev-icon" aria-hidden="true"></span>

    <span class="sr-only">Previous</span>

  </a>

    <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">

    <span class="carousel-control-next-icon" aria-hidden="true"></span>

    <span class="sr-only">Next</span>

  </a>

</div>

bootstrap-4 bootstrap-carousel

edited Jan 20 at 0:33

asked Jan 19 at 23:57

Leonardo Tandeli

edited Jan 20 at 0:33

asked Jan 19 at 23:57

Leonardo Tandeli

edited Jan 20 at 0:33

asked Jan 19 at 23:57

Leonardo Tandeli

asked Jan 19 at 23:57

Leonardo Tandeli

asked Jan 19 at 23:57

Leonardo Tandeli

Hi, I can't see what you need help with could you explain a little more, what is it you are trying to do and what isn't working with it?

– Pheonix2105
Jan 20 at 0:24

Here is a code pen, is this what you are trying to achieve? codepen.io/anon/pen/qLeoqQ?editors=1111

– Pheonix2105
Jan 20 at 0:32

Yes, exactly that! thank you.

– Leonardo Tandeli
Jan 20 at 0:48

add a comment |

Hi, I can't see what you need help with could you explain a little more, what is it you are trying to do and what isn't working with it?

– Pheonix2105
Jan 20 at 0:24

Here is a code pen, is this what you are trying to achieve? codepen.io/anon/pen/qLeoqQ?editors=1111

– Pheonix2105
Jan 20 at 0:32

Yes, exactly that! thank you.

– Leonardo Tandeli
Jan 20 at 0:48

Hi, I can't see what you need help with could you explain a little more, what is it you are trying to do and what isn't working with it?

– Pheonix2105
Jan 20 at 0:24

Here is a code pen, is this what you are trying to achieve? codepen.io/anon/pen/qLeoqQ?editors=1111

– Pheonix2105
Jan 20 at 0:32

Yes, exactly that! thank you.

– Leonardo Tandeli
Jan 20 at 0:48

add a comment |

1 Answer
1

active

oldest

votes

I believe the problem you are having is with

$('#myCarousel').carousel({

  interval: 3000,

  pause: null,

})

You are passing null as a parameter when it expects a string or boolean value, you can see this error from the console.

enter image description here

(Ctrl + shift + I) on Chrome

It should be

$('#myCarousel').carousel({

  interval: 3000,

  pause: false,

})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.bundle.min.js"></script>

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>



<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="3000" data-pause="null">

    <div class="carousel-inner">

        <div class="carousel-item active">

            <img class="d-block w-100" src="https://via.placeholder.com/150" alt="First slide">

            <div class="container">

                <div class="slider-text">

                    <h2>Lorem Ipsum is simply dummy text.</h2>

                    <p>ndustry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer.</p>

                </div>



            </div>

        </div>



        <div class="carousel-item">

            <img class="d-block w-100" src="https://via.placeholder.com/150" alt="Second slide">

            <div class="container">

                <div class="slider-text">

                    <h2>Lorem Ipsum is simply dummy text.</h2>

                    <p>ndustry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer.</p>

                </div>



            </div>

        </div>



    </div>

    <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">

    <span class="carousel-control-prev-icon" aria-hidden="true"></span>

    <span class="sr-only">Previous</span>

  </a>

    <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">

    <span class="carousel-control-next-icon" aria-hidden="true"></span>

    <span class="sr-only">Next</span>

  </a>

</div>

edited Jan 20 at 0:40

answered Jan 20 at 0:34

Pheonix2105

6702720

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54272411%2fproblem-on-adding-bootstrap-carousel-component%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

I believe the problem you are having is with

$('#myCarousel').carousel({

  interval: 3000,

  pause: null,

})

You are passing null as a parameter when it expects a string or boolean value, you can see this error from the console.

enter image description here

(Ctrl + shift + I) on Chrome

It should be

$('#myCarousel').carousel({

  interval: 3000,

  pause: false,

})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.bundle.min.js"></script>

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>



<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="3000" data-pause="null">

    <div class="carousel-inner">

        <div class="carousel-item active">

            <img class="d-block w-100" src="https://via.placeholder.com/150" alt="First slide">

            <div class="container">

                <div class="slider-text">

                    <h2>Lorem Ipsum is simply dummy text.</h2>

                    <p>ndustry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer.</p>

                </div>



            </div>

        </div>



        <div class="carousel-item">

            <img class="d-block w-100" src="https://via.placeholder.com/150" alt="Second slide">

            <div class="container">

                <div class="slider-text">

                    <h2>Lorem Ipsum is simply dummy text.</h2>

                    <p>ndustry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer.</p>

                </div>



            </div>

        </div>



    </div>

    <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">

    <span class="carousel-control-prev-icon" aria-hidden="true"></span>

    <span class="sr-only">Previous</span>

  </a>

    <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">

    <span class="carousel-control-next-icon" aria-hidden="true"></span>

    <span class="sr-only">Next</span>

  </a>

</div>

edited Jan 20 at 0:40

answered Jan 20 at 0:34

Pheonix2105

6702720

add a comment |

I believe the problem you are having is with

$('#myCarousel').carousel({

  interval: 3000,

  pause: null,

})

You are passing null as a parameter when it expects a string or boolean value, you can see this error from the console.

enter image description here

(Ctrl + shift + I) on Chrome

It should be

$('#myCarousel').carousel({

  interval: 3000,

  pause: false,

})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.bundle.min.js"></script>

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>



<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="3000" data-pause="null">

    <div class="carousel-inner">

        <div class="carousel-item active">

            <img class="d-block w-100" src="https://via.placeholder.com/150" alt="First slide">

            <div class="container">

                <div class="slider-text">

                    <h2>Lorem Ipsum is simply dummy text.</h2>

                    <p>ndustry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer.</p>

                </div>



            </div>

        </div>



        <div class="carousel-item">

            <img class="d-block w-100" src="https://via.placeholder.com/150" alt="Second slide">

            <div class="container">

                <div class="slider-text">

                    <h2>Lorem Ipsum is simply dummy text.</h2>

                    <p>ndustry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer.</p>

                </div>



            </div>

        </div>



    </div>

    <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">

    <span class="carousel-control-prev-icon" aria-hidden="true"></span>

    <span class="sr-only">Previous</span>

  </a>

    <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">

    <span class="carousel-control-next-icon" aria-hidden="true"></span>

    <span class="sr-only">Next</span>

  </a>

</div>

edited Jan 20 at 0:40

answered Jan 20 at 0:34

Pheonix2105

6702720

add a comment |

I believe the problem you are having is with

$('#myCarousel').carousel({

  interval: 3000,

  pause: null,

})

You are passing null as a parameter when it expects a string or boolean value, you can see this error from the console.

enter image description here

(Ctrl + shift + I) on Chrome

It should be

$('#myCarousel').carousel({

  interval: 3000,

  pause: false,

})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.bundle.min.js"></script>

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>



<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="3000" data-pause="null">

    <div class="carousel-inner">

        <div class="carousel-item active">

            <img class="d-block w-100" src="https://via.placeholder.com/150" alt="First slide">

            <div class="container">

                <div class="slider-text">

                    <h2>Lorem Ipsum is simply dummy text.</h2>

                    <p>ndustry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer.</p>

                </div>



            </div>

        </div>



        <div class="carousel-item">

            <img class="d-block w-100" src="https://via.placeholder.com/150" alt="Second slide">

            <div class="container">

                <div class="slider-text">

                    <h2>Lorem Ipsum is simply dummy text.</h2>

                    <p>ndustry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer.</p>

                </div>



            </div>

        </div>



    </div>

    <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">

    <span class="carousel-control-prev-icon" aria-hidden="true"></span>

    <span class="sr-only">Previous</span>

  </a>

    <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">

    <span class="carousel-control-next-icon" aria-hidden="true"></span>

    <span class="sr-only">Next</span>

  </a>

</div>

edited Jan 20 at 0:40

answered Jan 20 at 0:34

Pheonix2105

6702720

I believe the problem you are having is with

$('#myCarousel').carousel({

  interval: 3000,

  pause: null,

})

You are passing null as a parameter when it expects a string or boolean value, you can see this error from the console.

enter image description here

(Ctrl + shift + I) on Chrome

It should be

$('#myCarousel').carousel({

  interval: 3000,

  pause: false,

})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.bundle.min.js"></script>

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>



<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="3000" data-pause="null">

    <div class="carousel-inner">

        <div class="carousel-item active">

            <img class="d-block w-100" src="https://via.placeholder.com/150" alt="First slide">

            <div class="container">

                <div class="slider-text">

                    <h2>Lorem Ipsum is simply dummy text.</h2>

                    <p>ndustry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer.</p>

                </div>



            </div>

        </div>



        <div class="carousel-item">

            <img class="d-block w-100" src="https://via.placeholder.com/150" alt="Second slide">

            <div class="container">

                <div class="slider-text">

                    <h2>Lorem Ipsum is simply dummy text.</h2>

                    <p>ndustry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer.</p>

                </div>



            </div>

        </div>



    </div>

    <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">

    <span class="carousel-control-prev-icon" aria-hidden="true"></span>

    <span class="sr-only">Previous</span>

  </a>

    <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">

    <span class="carousel-control-next-icon" aria-hidden="true"></span>

    <span class="sr-only">Next</span>

  </a>

</div>

$('#myCarousel').carousel({

  interval: 3000,

  pause: false,

})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.bundle.min.js"></script>

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>



<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="3000" data-pause="null">

    <div class="carousel-inner">

        <div class="carousel-item active">

            <img class="d-block w-100" src="https://via.placeholder.com/150" alt="First slide">

            <div class="container">

                <div class="slider-text">

                    <h2>Lorem Ipsum is simply dummy text.</h2>

                    <p>ndustry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer.</p>

                </div>



            </div>

        </div>



        <div class="carousel-item">

            <img class="d-block w-100" src="https://via.placeholder.com/150" alt="Second slide">

            <div class="container">

                <div class="slider-text">

                    <h2>Lorem Ipsum is simply dummy text.</h2>

                    <p>ndustry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer.</p>

                </div>



            </div>

        </div>



    </div>

    <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">

    <span class="carousel-control-prev-icon" aria-hidden="true"></span>

    <span class="sr-only">Previous</span>

  </a>

    <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">

    <span class="carousel-control-next-icon" aria-hidden="true"></span>

    <span class="sr-only">Next</span>

  </a>

</div>

$('#myCarousel').carousel({

  interval: 3000,

  pause: false,

})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.bundle.min.js"></script>

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>



<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="3000" data-pause="null">

    <div class="carousel-inner">

        <div class="carousel-item active">

            <img class="d-block w-100" src="https://via.placeholder.com/150" alt="First slide">

            <div class="container">

                <div class="slider-text">

                    <h2>Lorem Ipsum is simply dummy text.</h2>

                    <p>ndustry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer.</p>

                </div>



            </div>

        </div>



        <div class="carousel-item">

            <img class="d-block w-100" src="https://via.placeholder.com/150" alt="Second slide">

            <div class="container">

                <div class="slider-text">

                    <h2>Lorem Ipsum is simply dummy text.</h2>

                    <p>ndustry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer.</p>

                </div>



            </div>

        </div>



    </div>

    <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">

    <span class="carousel-control-prev-icon" aria-hidden="true"></span>

    <span class="sr-only">Previous</span>

  </a>

    <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">

    <span class="carousel-control-next-icon" aria-hidden="true"></span>

    <span class="sr-only">Next</span>

  </a>

</div>

edited Jan 20 at 0:40

answered Jan 20 at 0:34

Pheonix2105

6702720

edited Jan 20 at 0:40

answered Jan 20 at 0:34

Pheonix2105

6702720

answered Jan 20 at 0:34

Pheonix2105

6702720

answered Jan 20 at 0:34

Pheonix2105

6702720

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Brtdku