locked
MAKING A BOOTSTRAP 4 CAROUSEL SLIDER RRS feed

  • Question

  • I tried to MANIPULATE an example BOOTSTRAP 4 CAROUSEL SLIDER  but I find  a problem when running my application in my site sharepoint 2013
    here is my code 

    <%@ Assembly Name="$SharePoint.Project.AssemblyFullName$" %>
    <%@ Assembly Name="Microsoft.Web.CommandUI, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> 
    <%@ Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> 
    <%@ Register Tagprefix="Utilities" Namespace="Microsoft.SharePoint.Utilities" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
    <%@ Register Tagprefix="asp" Namespace="System.Web.UI" Assembly="System.Web.Extensions, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" %>
    <%@ Import Namespace="Microsoft.SharePoint" %> 
    <%@ Register Tagprefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
    <%@ Control Language="C#" AutoEventWireup="true" CodeBehind="bootstrap.ascx.cs" Inherits="ahmed.bootstrap.bootstrap" %>


    <script src="../_layouts/15/Scripts/bootstrap.min.js"></script>
    <script src="../_layouts/15/Scripts/jquery-3.3.1.min.js"></script>
    <link href="../_layouts/15/Scripts/bootstrap.min.css" rel="stylesheet" />
    <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
      <ol class="carousel-indicators">
        <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
        <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
        <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
      </ol>
      <div class="carousel-inner">
        <div class="carousel-item active">
          <img class="d-block w-100" src="../_layouts/15/images/ImagesVoituresJPG/6.jpg" alt="First slide">
        </div>
        <div class="carousel-item">
          <img class="d-block w-100" src="../_layouts/15/images/ImagesVoituresJPG/5.jpg" alt="Second slide">
        </div>
        <div class="carousel-item">
          <img class="d-block w-100" src="../_layouts/15/images/ImagesVoituresJPG/4.jpg" alt="Third slide">
        </div>
      </div>
      <a class="carousel-control-prev" href="#carouselExampleIndicators" 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="#carouselExampleIndicators" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>
    </div>

    *Here's the result*


    and here is the mistake in my console 





    Monday, April 23, 2018 10:21 PM

Answers

  • Hi,

    Please try to call jQuery library before bootstrap.js

    <script src="js/jquery-3.3.1.min.js"></script>
    
    <script src="js/bootstrap.min.js"></script>

    After that, check if it works fine.

    Best Regards,

    Carl Zhou


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnsf@microsoft.com.


    Click here to learn more. Visit the dedicated forum to share, explore and talk to experts about Microsoft Teams.

    • Marked as answer by arous ahmed Wednesday, April 25, 2018 1:29 PM
    Tuesday, April 24, 2018 9:23 AM

All replies

  • Hi,

    Please try to call jQuery library before bootstrap.js

    <script src="js/jquery-3.3.1.min.js"></script>
    
    <script src="js/bootstrap.min.js"></script>

    After that, check if it works fine.

    Best Regards,

    Carl Zhou


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnsf@microsoft.com.


    Click here to learn more. Visit the dedicated forum to share, explore and talk to experts about Microsoft Teams.

    • Marked as answer by arous ahmed Wednesday, April 25, 2018 1:29 PM
    Tuesday, April 24, 2018 9:23 AM
  • thanks a lot 
    Wednesday, April 25, 2018 1:30 PM