1. MDB Home Page
  2. Support Main Page
  3. General Bootstrap questions
Topic: video carousel

neo pro asked 6 years ago

hi..my video carousel is not working? it only shows the first video but it doesn't automatically slide into the second and third... heres my code below: <!--Slides--> <divclass="carousel-inner"role="listbox"> <!--First slide--> <divclass="carousel-item active"> <!--Mask color--> <divclass="view hm-purple-slight"> <!--Video source--> <videoclass="video-full"autoplayloop> <sourcesrc="https://mdbootstrap.com/img/video/Tropical.mp4"type="video/mp4"/> </video> <divclass="full-bg-img"></div> </div> <!--Caption--> <divclass="carousel-caption"> <divclass="flex-center animated fadeIn"> <ul> <li> <h1class="h1-responsive">Guide Trip</h1> </li> <li> <p>Guide Trip is your final destination for all your travel needs</p> </li> <li> <atarget="_blank"href="/"class="btn btn-primary btn-lg"rel="nofollow">Sign up!</a> </li> </ul> </div> </div> <!--Caption--> </div> <!--/First slide--> <!--Second slide--> <divclass="carousel-item"> <!--Mask color--> <divclass="view hm-blue-slight"> <!--Video source--> <videoclass="video-full"autoplayloop> <sourcesrc="https://mdbootstrap.com/img/video/Lines.mp4"type="video/mp4"/> </video> <divclass="mask"></div> </div> <!--Caption--> <divclass="carousel-caption"> <divclass="flex-center animated fadeInDown"> <ul> <li> <h1class="h1-responsive">Guide Trip does all the work in no time</h1> </li> <li> <p>Your Vacation No Worries!</p> </li> <li> <atarget="_blank"href="https://mdbootstrap.com/bootstrap-tutorial/"class="btn btn-primary btn-lg"rel="nofollow">Start learning</a> </li> </ul> </div> </div> <!--/.Caption--> </div> <!--/Second slide--> <!--Third slide--> <divclass="carousel-item"> <!--Mask color--> <divclass="view hm-black-light"> <!--Video source--> <videoclass="video-full"autoplayloop> <sourcesrc="https://mdbootstrap.com/img/video/forest.mp4"type="video/mp4"/> </video> <divclass="mask"></div> </div> <!--Caption--> <divclass="carousel-caption"> <divclass="flex-center animated fadeInDown"> <ul> <li> <h1class="h1-responsive">Sign Up Now For Free</h1> </li> <li> <p>Vacation...You Deserve It</p> </li> <li> <atarget="_blank"href="https://mdbootstrap.com/forums/forum/support/"class="btn btn-default btn-lg"rel="nofollow">Support forum</a> </li> </ul> </div> </div> <!--/.Caption--> </div> <!--/Third slide--> </div> <!--/.Slides-->  

Marta Wierzbicka staff answered 6 years ago

Hi, OK, I'm glad you solved the problem. Best, Marta

neo pro answered 6 years ago

nevermind i figured it out..thanks for your help

Marta Wierzbicka staff answered 6 years ago

Hi, try to paste to your file exactly the same code from our documentation: https://mdbootstrap.com/javascript/carousel/#video . Everything works with this carousel. Best, Marta

neo pro commented 6 years ago

i paste the template word for word into my html...then i added the MDBpro to be called because having just the file..is just a broken code that needs the MDBpro folder to align it. I'm not sure you guys know but everytime a user pastes your code its always broken at first because your always gonna need the MDBpro folder to make it work. i hope i am making sense in this. i am using Visual Studios Code to do all of this...i just really want that mp4 video to slide to the next one...

neo pro answered 6 years ago

i just really want the video to slide is all please... this is what i have on my script below
<!-- SCRIPTS -->
<!-- JQuery -->
<scripttype="text/javascript"src="js/jquery-3.2.1.min.js"></script>
<!-- Bootstrap dropdown -->
<scripttype="text/javascript"src="js/popper.min.js"></script>
<!-- Bootstrap core JavaScript -->
<scripttype="text/javascript"src="js/bootstrap.min.js"></script>
<!-- MDB core JavaScript -->
<scripttype="text/javascript"src="js/mdb.min.js"></script>
I did go here -->https://mdbootstrap.com/javascript/carousel/#usage   like you said and still nothing work...please help

Mirosław Stasiak free answered 6 years ago

Hi,

You had a slight spelling mistake in your solution.
Check this example in codepen.io:
https://codepen.io/mirekmts/pen/NaxBGP

And read this
https://mdbootstrap.com/javascript/carousel/#usage

If you continue to have problems see what is displayed in the console

Regards,

neo pro commented 6 years ago

hi ... so this is whats being displayed in the console... DevTools failed to parse SourceMap: http://localhost:8188/css/bootstrap.min.css.map
Write
Create snippet
Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status

Answered

Specification of the issue
  • ForumUser: Pro
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
Tags
About author
neo
Pro User 8Support score
13Questions 8Answers 0Snippets