What caused the slide show to malfunction during the live preview?

1-Why is the slide show not working in the live preview?

It works on my desktop, but when I share it in the live preview, it doesn't work.

<div class="slide-show-content"><!-- /image gallery slideshow-->
<div class="slide-show-default">
    <div class="container">
        <div class="row">
            <div  id="app" class="col-xs-12">
                <div id="wrapper-sliderTv">
                    <!-- sliderTV html-->
                    <div id="sliderTV" class="sliderTV">
                        <!-- slidable items in carousel -->
                        <div id="item-0" class="sliderTV__item">
                            <h1>Amélie</h1>
                            <img src="assets/amelie.jpg">
                        </div>
                        <div id="item-1" class="sliderTV__item">
                            <h1>Django Unchained</h1>
                            <img src="assets/django-unchained.jpg">
                        </div>
                        <div id="item-2" class="sliderTV__item">
                            <h1>Fight Club</h1>
                            <img src="assets/fight-club.jpg">
                        </div>
                        <div id="item-3" class="sliderTV__item">
                            <h1>Forrest Gump</h1>
                            <img src="assets/forrest-gump.jpg">
                        </div>
                        <div id="item-4" class="sliderTV__item">
                            <h1>Inglourious Basterds</h1>
                            <img src="assets/inglourious-basterds.jpg">
                        </div>
                        <div id="item-5" class="sliderTV__item">
                            <h1>Inside Out</h1>
                            <img src="assets/inside-out-2015.jpg">
                        </div>
                        <div id="item-6" class="sliderTV__item">
                            <h1>Interstellar</h1>
                            <img src="assets/interstellar.jpg">
                        </div>
                        <div id="item-7" class="sliderTV__item">
                            <h1>Léon: The Professional</h1>
                            <img src="assets/leon-the-professional.jpg">
                        </div>
                        <div id="item-8" class="sliderTV__item">
                            <h1>San Andreas</h1>
                            <img src="assets/san-andreas.jpg">
                        </div>
                        <!-- optional navigational arrows -->
                        <div class="sliderTV__prev">&#10096;</div>
                        <div class="sliderTV__next">&#10097;</div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>

2-Why does using Owl Carousel slider hide some other jQuery elements?

The problem arises where it gets hidden when I use the Owl Carousel in the same section.

            <li class="body">
        <div class="collapse" id="media-one">
        <div class="body-content">
        <div class="icons-default"><!--icons-->
          <div class="icons">
              <ul class="icons-content">
                 <li>
                      <button class="btn" type="button">
                          <i class="fa fa-commenting"></i>
                      </button>
                      <span>comment</span>
                  </li>
                  <li>
                      <button class="btn" type="button">
                          <i class="fa fa-heart"></i>
                      </button>
                      <span>like</span>
                  </li>
                  <li>
                      <button class="btn" type="button">
                          <i class="fa fa-share-alt"></i>
                      </button>
                      <span>share</span>
                  </li>
              </ul>
           </div>
        </div>
        <div class="comments"><!-- comments-->
          <ul class="comments-content clearfix"> <!-- item 1-->
              <li class="img">
                  <img src="imgs/media/post-profile.png" alt="//" />
              </li>
              <li class="details">
                  <span class="head">Mohamed Samy</span>
                  <span class="text">
                      Praesent ac condimentum felis. Nulla at nisl orci, at dignissim dolor raesent ac condimentum felis
                  </span>
              </li>
          </ul>
          <ul class="comments-content clearfix"> <!-- item 2-->
              <li class="img">
                  <img src="imgs/media/post-profile.png" alt="//" />
              </li>
              <li class="details">
                  <span class="head">Mohamed Samy</span>
                  <span class="text">
                      Praesent ac condimentum felis. Nulla at nisl orci, at dignissim dolor raesent ac condimentum felis
                  </span>
              </li>
          </ul>
          <ul class="comments-content clearfix"> <!-- item 3-->
              <li class="img">
                  <img src="imgs/media/post-profile.png" alt="//" />
              </li>
              <li class="details">
                  <span class="head">Mohamed Samy</span>
                  <span class="text">
                      Praesent ac condimentum felis. Nulla at nisl orci, at dignissim dolor raesent ac condimentum felis
                  </span>
              </li>
          </ul>
        </div>
        </div>
        </div>
        </li>

I hope my question is clearer now.

Live Link:

Answer №1

To avoid the error message "TypeError: $(...).sliderTV is not a function," ensure that you have added the script for sliderTV before calling the function. I encountered this issue while debugging with Firebug.


$('#sliderTV').sliderTV();

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The css property of *ngContainerOutlet is ineffective when applied to an ng-component with encapsulation

When I utilize *ngContainerOutlet to dynamically insert components, it wraps the component's template within an ng-component tag which causes my CSS styles to become ineffective. For example: <div class="my-class"> <ng-container *ngComp ...

Curved edges navigation bar design

Having trouble rounding the corners of my navigation bar. When I use border-radius: 15px;, it rounds all the corners of the <a> tag, but I only want to round the corners of the <li> tags to adjust the margins of the whole toolbar. Check out th ...

Encountering a crash when trying to display HTML text in UITextView in Swift 4?

Recently, I implemented this code snippet: https://i.sstatic.net/fYCXQ.png var htmlToAttributedString: NSAttributedString? { guard let data = data(using: .utf8) else { return NSAttributedString() } do { return try NSAttributedString(data: ...

"What is the significance of the .default property in scss modules when used with typescript

When dealing with scss modules in a TypeScript environment, my modules are saved within a property named default. Button-styles.scss .button { background-color: black; } index.tsx import * as React from 'react'; import * as styles from ' ...

Issue with Angulajs: ng-repeat not properly displaying values in nested JSON array

My JSON data for the other_prize is as follows: [{"prizeno":2,"prizedesc":"Rs :100,000/-","totalamt":100000,"conslation":"f","prizeticket":[{"seriesname":"RJ","digit":443581,"district":"THRISSUR"},{"seriesname":"RK","digit":633225,"district":"THIRUVAN ...

What is the best way to retrieve EXIF data following the AJAX loading of images?

Currently, I am developing a swipe-able wine image viewer for NapaWapa.com and it's functioning quite smoothly: The challenge I'm facing is related to using a jquery plugin to extract the exif data from the images in the gallery. Unfortunately, ...

How to Make Bootstrap 3 Collapse Panels Stand Out with an Active Class

First of all, here is the fiddle link: http://jsfiddle.net/krish7878/h38jn324 I have a simple question. When a panel is clicked and it expands to show its contents, a class 'active' should be added to 'panel-heading'. I came across a ...

Issues with the display property

After setting the display of a div tag as none in the style property, I am trying to show it based on an on-click function. However, the issue I am facing is that when I click on the function, the div displays for a brief moment then disappears again. Ca ...

Revamping the Bootstrap framework in a major project

Currently, I am undertaking a project that involves the use of bootstrap 2.3.2 stylesheets along with bootstrap 3.0.0 .js scripts. The client side technology is significantly outdated and my primary objective is to update the bootstrap files to leverage th ...

Scroll through the carouFredSel carousel by pressing the mouse

Looking to create a carousel that continuously scrolls when the mouse is pressed down and stops when released. Currently have a working example with hover functionality. How can I modify it to work based on mousedown instead? $("#foo2").carouFredSel({ ...

Error Encountered While Submitting Email Form

I'm having trouble with my email submission form on my website. I've checked the code and it seems fine, but for some reason, the submissions are not going through successfully. Even when bypassing the JavaScript and directly using the PHP script ...

Javascript code to eliminate the final appearance of a comma within a span element

I am trying to add object keys to a span tag with the class result, separating them with commas. However, I am struggling to remove the last comma in the text. Result: <span class="result"></span> JavaScript: for (key in obj) { $(".resul ...

I have a dynamic blog site that is generated on the fly using Ajax, making the content unsearchable

I have a blog website that is created dynamically using Ajax (XMLHttpRequest) and the HTML History API. One issue I am facing is that my content is not searchable by search engines like Googlebot. I know that Google is now able to analyze such sites, but w ...

Is there a way to modify the height and width of a div layer?

How can I adjust the height and width of the layer on the card? Also, I want only the close button to be clickable and everything else to be unclickable. Can anyone help me find a solution? <link rel="stylesheet" href="https://stackpath.bootstrapcdn. ...

Using HTML and CSS to create interactive icons that change color when clicked, similar to how a link behaves

Have you ever wondered if there's a way to make an icon act like a link when clicked, just like regular text links turning purple? And not just the last one clicked, but every single icon that gets clicked. Trying to use the :visited pseudo was unsucc ...

JavaScript code to obscure

My goal is to create a JavaScript function where the "costCenter" object starts with visibility set to false. However, when the user clicks on the "computer" item in a dropdown list, the visibility of "costCenter" should change to true. This is my current ...

Getting an error response with a status of 200 when making a jQuery ajax call

After sending a jQuery ajax request to my express-powered node.js server, everything seemed to be in order. However, to my surprise, the response invoked the error callback instead of the success callback, despite receiving a status code of "200". It was d ...

Using a personalized font in CSS isn't functioning correctly and is displaying Times New Roman instead

I've been struggling to include a custom font in my project, but it's not working as expected. Here's how I added it to the .css file: @font-face { font-family: 'Open Sans'; src: url('/open-sans.eot'); src: u ...

How can I align the middle of the element within its parent until it hits the top-left edge, at which point should I stop center

I am trying to center an element within a parent container. It seems simple with methods like transform, flexbox, and grid... The issue arises with overflow behavior. When the parent container shrinks below the dimensions of the child element, scrollbars a ...

Extract the image URL from the href attribute using Xpath

My goal is to extract all images enclosed in href attributes from the given code snippet <div class="jcarousel product-imagethumb-alt" data-jcarousel="true"> <ul> <li> <a href="https://domain/imagefull.jpg" onclick="return false;" cla ...