1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

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):

    SEMrush
     
    Last edited by a moderator: Jan 18, 2020
    newbie.101, Jan 18, 2020 IP
    SEMrush
  2. loki781

    loki781 Greenhorn

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