Python Forum

Full Version: Django - slide duration
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
Hi,

I am starting to learn Django and I have been trying to see where to look in css or js folders to change the duration of slideshow in the site.

<section class="welcome-area">
    <!-- Welcome Slides -->
    <div class="welcome-slides owl-carousel">
      <!-- Single Welcome Slide -->
      <div class="welcome-welcome-slide bg-img bg-gradient-overlay jarallax" style="background-image: url({% static 'website/img/bg-img/1.jpg' %});">
        <div class="container h-100">
          <div class="row h-100 align-items-center">
            <div class="col-12">
              <!-- Welcome Text -->
              <div class="welcome-text text-center">
                <h2 data-animation="fadeInUp" data-delay="100ms">We Believe Everyone Should Have Easy Access To Great Dental Care</h2>
                <p data-animation="fadeInUp" data-delay="300ms">As a leading industry innovator, Dento is opening up exciting new opportunities for dental professionals, investors, employees & suppliers. Contact us to find out what we have to offer you.</p>
                <div class="welcome-btn-group">
                  <a href="#" class="btn dento-btn mx-2" data-animation="fadeInUp" data-delay="500ms">Register</a>
                  <a href="#" class="btn dento-btn mx-2 active" data-animation="fadeInUp" data-delay="700ms">Login</a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="welcome-welcome-slide bg-img bg-gradient-overlay jarallax" style="background-image: url({% static 'website/img/bg-img/3.jpg' %});">
        <div class="container h-100">
          <div class="row h-100 align-items-center">
            <div class="col-12">
              <!-- Welcome Text -->
              <div class="welcome-text text-center">
                <h2 data-animation="fadeInUp" data-delay="100ms">We Believe Everyone Should Have Easy Access To Great Dental Care</h2>
                <p data-animation="fadeInUp" data-delay="300ms">From the minute you walk into our practice, you’ll see why we stand out – not only do we have the expertise and range of services to ensure your dental needs are met, our patients also frequently comment on what a lovely atmosphere we provide, offering a refreshingly easy experience compared to other dental practices.

                Any fear of dentists will fly out the window when you meet our friendly, highly skilled team. We will ensure you are thoroughly diagnosed and informed so that you know your needs are completely taken care of, and this is just one of many reasons why our patients trust us with their care.

                Located in the heart of Hove, we pride ourselves on our excellent level of service and our unparalleled attention to detail and exemplary staff who will insure you get the very best dental care available. Our dental services are second to none and will leave you with a smile on your face.</p>

                <div class="welcome-btn-group">
                  <a href="#" class="btn dento-btn mx-2" data-animation="fadeInUp" data-delay="500ms">Register</a>
                  <a href="#" class="btn dento-btn mx-2 active" data-animation="fadeInUp" data-delay="700ms">Login</a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Single Welcome Slide -->
      <div class="welcome-welcome-slide bg-img bg-gradient-overlay jarallax" style="background-image: url({% static 'website/img/bg-img/2.jpg' %});">
        <div class="container h-100">
          <div class="row h-100 align-items-center">
            <div class="col-12">
              <!-- Welcome Text -->
              <div class="welcome-text text-center">
                <h2 data-animation="fadeInDown" data-delay="100ms">We Believe Everyone Should Have Easy Access To Great Dental Care</h2>
                <p data-animation="fadeInDown" data-delay="300ms">Top Quality Dental Treatment
                  Fully dedicated to your dental health
                  This is a totally different concept with the dental office set-up, strategically placed in Khalifa City in Abu Dhabi, that we will only cater to dental health. At Aspetar we not only deals with the surgical aspects, the prosthodontics aspects, the laboratory aspects, post –implant procedures but continuing research and training in different specialists will keep us in the forefront of new developments of dental health.</p>
                <div class="welcome-btn-group">
                  <a href="#" class="btn dento-btn mx-2" data-animation="fadeInDown" data-delay="500ms">Register</a>
                  <a href="#" class="btn dento-btn mx-2 active" data-animation="fadeInDown" data-delay="700ms">Login</a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
  <!-- ***** Welcome Area End ***** -->
Django doesn't do anything in the browser - it's a server-side framework. Looking at the CSS classes in your template, I notice that one of the classes on line 3 is owl-carousel. Do you have to use owl-carousel? It looks like it has been deprecated (assuming this is the same as what you're using): https://github.com/OwlCarousel2/OwlCarousel2. All I'd advise is use something more supported (e.g. Bootstrap).
(Aug-04-2021, 04:10 PM)ndc85430 Wrote: [ -> ]Django doesn't do anything in the browser - it's a server-side framework. Looking at the CSS classes in your template, I notice that one of the classes on line 3 is owl-carousel. Do you have to use owl-carousel? It looks like it has been deprecated (assuming this is the same as what you're using): https://github.com/OwlCarousel2/OwlCarousel2. All I'd advise is use something more supported (e.g. Bootstrap).

I am new to css so I don't know how to change to bootstrap. can you help figure out how to change the duration between each picture? I have the css folder link below:
Did you already look at the docs for Bootstrap's carousel (https://getbootstrap.com/docs/4.0/components/carousel/), trying things out? You'll of course need to include the CSS and JS in your page first - see the "Getting Started" page for that.
(Aug-05-2021, 03:09 PM)ndc85430 Wrote: [ -> ]Did you already look at the docs for Bootstrap's carousel (https://getbootstrap.com/docs/4.0/components/carousel/), trying things out? You'll of course need to include the CSS and JS in your page first - see the "Getting Started" page for that.

I looked at the document and got this example but still not working

<div id="carouselExampleInterval" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active" data-interval="10000">
      <img src="{% static 'website/img/bg-img/10.png' %}" class="d-block w-100">
    </div>
    <div class="carousel-item" data-interval="7000">
      <img src="{% static 'website/img/bg-img/11.png' %}" class="d-block w-100">
    </div>
    <div class="carousel-item" data-interval="3000">
      <img src="{% static 'website/img/bg-img/9.png' %}" class="d-block w-100">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleInterval" 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="#carouselExampleInterval" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>
it still counts 5 seconds.