main.js HELP!

Discussion in 'Programming' started by newbie.101, Jan 18, 2020.

  1. #1
    I downloaded a free bootstrap template and it has on the index page a scrolling slide, you can change the slides from 1-9 but if I want anything pass 9 like 10 it wont display the image. How can I make it so it does take images past 9. The code I think I have to adjust is pasted below. Right now the naming convention is slide01, slide02 etc. I'm a graphics guy so be easy on me ...

    p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px Helvetica} p.p2 {margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px Helvetica; min-height: 14.0px} span.Apple-tab-span {white-space:pre}
    
    /*
    
    Hielo by TEMPLATED
    
    templated.co @templatedco
    
    Released for free under the Creative Commons Attribution 3.0 license (templated.co/license)
    
    */
    
    
    
    var settings = {
    
    
    
    banner: {
    
    
    
    // Indicators (= the clickable dots at the bottom).
    
    indicators: true,
    
    
    
    // Transition speed (in ms)
    
    // For timing purposes only. It *must* match the transition speed of "#banner > article".
    
    speed: 1500,
    
    
    
    // Transition delay (in ms)
    
    delay: 5000,
    
    
    
    // Parallax intensity (between 0 and 1; higher = more intense, lower = less intense; 0 = off)
    
    parallax: 0.25
    
    
    
    }
    
    
    
    };
    
    
    
    (function($) {
    
    
    
    skel.breakpoints({
    
    xlarge:'(max-width: 1680px)',
    
    large:'(max-width: 1280px)',
    
    medium:'(max-width: 980px)',
    
    small:'(max-width: 736px)',
    
    xsmall:'(max-width: 480px)'
    
    });
    
    
    
    /**
    
    * Applies parallax scrolling to an element's background image.
    
    * [USER=23786]@return[/USER] {jQuery} jQuery object.
    
    */
    
    $.fn._parallax = (skel.vars.browser == 'ie' || skel.vars.mobile) ? function() { return $(this) } : function(intensity) {
    
    
    
    var$window = $(window),
    
    $this = $(this);
    
    
    
    if (this.length == 0 || intensity === 0)
    
    return $this;
    
    
    
    if (this.length > 1) {
    
    
    
    for (var i=0; i < this.length; i++)
    
    $(this)._parallax(intensity);
    
    
    
    return $this;
    
    
    
    }
    
    
    
    if (!intensity)
    
    intensity = 0.25;
    
    
    
    $this.each(function() {
    
    
    
    var $t = $(this),
    
    on, off;
    
    
    
    on = function() {
    
    
    
    $t.css('background-position', 'center 100%, center 100%, center 0px');
    
    
    
    $window
    
    .on('scroll._parallax', function() {
    
    
    
    var pos = parseInt($window.scrollTop()) - parseInt($t.position().top);
    
    
    
    $t.css('background-position', 'center ' + (pos * (-1 * intensity)) + 'px');
    
    
    
    });
    
    
    
    };
    
    
    
    off = function() {
    
    
    
    $t
    
    .css('background-position', '');
    
    
    
    $window
    
    .off('scroll._parallax');
    
    
    
    };
    
    
    
    skel.on('change', function() {
    
    
    
    if (skel.breakpoint('medium').active)
    
    (off)();
    
    else
    
    (on)();
    
    
    
    });
    
    
    
    });
    
    
    
    $window
    
    .off('load._parallax resize._parallax')
    
    .on('load._parallax resize._parallax', function() {
    
    $window.trigger('scroll');
    
    });
    
    
    
    return $(this);
    
    
    
    };
    
    
    
    /**
    
    * Custom banner slider for Slate.
    
    * [USER=23786]@return[/USER] {jQuery} jQuery object.
    
    */
    
    $.fn._slider = function(options) {
    
    
    
    var$window = $(window),
    
    $this = $(this);
    
    
    
    if (this.length == 0)
    
    return $this;
    
    
    
    if (this.length > 1) {
    
    
    
    for (var i=0; i < this.length; i++)
    
    $(this)._slider(options);
    
    
    
    return $this;
    
    
    
    }
    
    
    
    // Vars.
    
    varcurrent = 0, pos = 0, lastPos = 0,
    
    slides = [], indicators = [],
    
    $indicators,
    
    $slides = $this.children('article'),
    
    intervalId,
    
    isLocked = false,
    
    i = 0;
    
    
    
    // Turn off indicators if we only have one slide.
    
    if ($slides.length == 1)
    
    options.indicators = false;
    
    
    
    // Functions.
    
    $this._switchTo = function(x, stop) {
    
    
    
    if (isLocked || pos == x)
    
    return;
    
    
    
    isLocked = true;
    
    
    
    if (stop)
    
    window.clearInterval(intervalId);
    
    
    
    // Update positions.
    
    lastPos = pos;
    
    pos = x;
    
    
    
    // Hide last slide.
    
    slides[lastPos].removeClass('top');
    
    
    
    if (options.indicators)
    
    indicators[lastPos].removeClass('visible');
    
    
    
    // Show new slide.
    
    slides[pos].addClass('visible').addClass('top');
    
    
    
    if (options.indicators)
    
    indicators[pos].addClass('visible');
    
    
    
    // Finish hiding last slide after a short delay.
    
    window.setTimeout(function() {
    
    
    
    slides[lastPos].addClass('instant').removeClass('visible');
    
    
    
    window.setTimeout(function() {
    
    
    
    slides[lastPos].removeClass('instant');
    
    isLocked = false;
    
    
    
    }, 100);
    
    
    
    }, options.speed);
    
    
    
    };
    
    
    
    // Indicators.
    
    if (options.indicators)
    
    $indicators = $('<ul class="indicators"></ul>').appendTo($this);
    
    
    
    // Slides.
    
    $slides
    
    .each(function() {
    
    
    
    var $slide = $(this),
    
    $img = $slide.find('img');
    
    
    
    // Slide.
    
    $slide
    
    .css('background-image', 'url("' + $img.attr('src') + '")')
    
    .css('background-position', ($slide.data('position') ? $slide.data('position') : 'center'));
    
    
    
    // Add to slides.
    
    slides.push($slide);
    
    
    
    // Indicators.
    
    if (options.indicators) {
    
    
    
    var $indicator_li = $('<li>' + i + '</li>').appendTo($indicators);
    
    
    
    // Indicator.
    
    $indicator_li
    
    .data('index', i)
    
    .on('click', function() {
    
    $this._switchTo($(this).data('index'), true);
    
    });
    
    
    
    // Add to indicators.
    
    indicators.push($indicator_li);
    
    
    
    }
    
    
    
    i++;
    
    
    
    })
    
    ._parallax(options.parallax);
    
    
    
    // Initial slide.
    
    slides[pos].addClass('visible').addClass('top');
    
    
    
    if (options.indicators)
    
    indicators[pos].addClass('visible');
    
    
    
    // Bail if we only have a single slide.
    
    if (slides.length == 1)
    
    return;
    
    
    
    // Main loop.
    
    intervalId = window.setInterval(function() {
    
    
    
    current++;
    
    
    
    if (current >= slides.length)
    
    current = 0;
    
    
    
    $this._switchTo(current);
    
    
    
    }, options.delay);
    
    
    
    };
    
    
    
    $(function() {
    
    
    
    var$window = $(window),
    
    $body = $('body'),
    
    $header = $('#header'),
    
    $banner = $('.banner');
    
    
    
    // Disable animations/transitions until the page has loaded.
    
    $body.addClass('is-loading');
    
    
    
    $window.on('load', function() {
    
    window.setTimeout(function() {
    
    $body.removeClass('is-loading');
    
    }, 100);
    
    });
    
    
    
    // Prioritize "important" elements on medium.
    
    skel.on('+medium -medium', function() {
    
    $.prioritize(
    
    '.important\\28 medium\\29',
    
    skel.breakpoint('medium').active
    
    );
    
    });
    
    
    
    // Banner.
    
    $banner._slider(settings.banner);
    
    
    
    // Menu.
    
    $('#menu')
    
    .append('<a href="#menu" class="close"></a>')
    
    .appendTo($body)
    
    .panel({
    
    delay: 500,
    
    hideOnClick: true,
    
    hideOnSwipe: true,
    
    resetScroll: true,
    
    resetForms: true,
    
    side: 'right'
    
    });
    
    
    
    // Header.
    
    if (skel.vars.IEVersion < 9)
    
    $header.removeClass('alt');
    
    
    
    if ($banner.length > 0
    
    &&$header.hasClass('alt')) {
    
    
    
    $window.on('resize', function() { $window.trigger('scroll'); });
    
    
    
    $banner.scrollex({
    
    bottom:$header.outerHeight(),
    
    terminate:function() { $header.removeClass('alt'); },
    
    enter:function() { $header.addClass('alt'); },
    
    leave:function() { $header.removeClass('alt'); $header.addClass('reveal'); }
    
    });
    
    
    
    }
    
    
    
    });
    
    
    
    })(jQuery);
    Code (markup):
     
    Last edited by a moderator: Jan 18, 2020
    newbie.101, Jan 18, 2020 IP
  2. loki781

    loki781 Greenhorn

    Messages:
    25
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    13
    #2
    Post the html
     
    loki781, Feb 28, 2020 IP