Dynamic Carousel

In this example below you will see how to do a Dynamic Carousel with some HTML / CSS and Javascript

Dynamic Carousel pulling in and adding images from a file upload. Uses Vue.js as a demonstration for a tech talk @ work.

Thumbnail
This awesome code was written by 10Dimensional, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright 10Dimensional ©

Technologies

  • HTML
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Dynamic Carousel</title>
  
  
  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.min.css'>

  
  
</head>

<body>

  <section id="app">
{{ message }}  
  <!-- 
  <transition>
  -->
  
  <slide-component></slide-component>
  
  <!--
  </transition>
  ->
</section>
  <script src='https://unpkg.com/vue/dist/vue.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/10Dimensional/dynamic-carousel-Lxxmaq */
var Slide = {
  template: '<p>test</p>'
}

/* var transition = {
  template: ''
} */

var app = new Vue({
  el: '#app',
  data: {
    message: 'Testing!'
  },
  components: {
    'slide-component': Slide
  }
});

Comments