Member Avatar for vivek1995

my site's link is http://daplonline.in/

i want to put 4 more link in above image "Note only for first image not at all" am tired let's see the CSS Code for bottom buttons

  .main_image {
    width: 598px; height: 460px;
    float: left;
    background: #333;
    position: relative;
    overflow: hidden;
    color: #fff;
}
.main_image h2 {
    font-size: 2em;
    font-weight: normal;
    margin: 0 0 5px;    padding: 10px;

}

.main_image h2 { display: none; }
.main_image p {
    font-size: 1.2em;
    padding: 10px;  margin: 0;
    line-height: 1.6em;

}
.block small { 
    padding: 0 0 0 20px; 
    background: url(images/icon_cal.gif) no-repeat 0 center; 
    font-size: 1em; 
    display:none;
}
.main_image .block small {margin-left: 10px;}
.main_image .desc{
    position: absolute;
    bottom: 0;  left: 0;
    width: 100%;
    display:none;
}
.main_image .block{}

when i put any other link it appers in all image but i want to put 4 link in only first image 'Admission cum Scholarship Test" for sample output i try but not success :(

i want to make something like this but only for first image not at all.

http://daplonline.in/images/ineed.jpg << I need like this
javascript jquery html css

  • 2 Contributors
  • 5 Replies
  • 125 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by nauticalmac

Dani AI

Generated

Short answer for : there are two clean ways to show six links on the first slide only — put the overlay markup directly inside the first slide, or toggle a single overlay with JavaScript when the first slide becomes active. is right to ask for the slider code: the exact event name and selectors depend on which plugin you use (Slick, Owl, Bootstrap carousel, etc.).

A simple HTML-first approach (no JS needed) — place the link list inside only the first slide so it never appears in others:

<div class="slide first">
  <img src="...">
  <div class="first-overlay">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <!-- more links -->
  </div>
</div>

Basic CSS to keep that overlay clickable above the image:

.first-overlay {
  position: absolute;
  bottom: 16px;
  left: 16px;
  z-index: 50;
}
.first-overlay a { display:inline-block; margin-right:10px; }

If your slider clones slides for looping (common), the “first” DOM element might be duplicated; in that case use the slider’s change event to show/hide a single overlay. Examples:

$('.slider').on('afterChange', function(e, slick, currentSlide){
  $('.first-overlay').toggle(currentSlide === 0);
});
$('.owl-carousel').on('changed.owl.carousel', function(e){
  $('.first-overlay').toggle(e.item.index === 0);
});

Troubleshooting checklist: inspect the DOM to see cloned slides, watch the slider events in the console, confirm the selector you use matches the library’s “active” slide class, and ensure z-index + pointer-events allow clicks on the links. If you post the slider init code or the plugin name (as requested), a small, exact snippet can be provided.

Recommended Answers

All 5 Replies

Member Avatar for nauticalmac

You have lots of images on your page. If you want help, describe the problem more exactly.
Also, why include css if problem is to do with links.

Member Avatar for vivek1995

i want to put 6 link like http://daplonline.in/images/ineed.jpg
i think i have jquery problem i want to put 6 new link only in the first image of slider. when i try to put link the link will show all the slider image :(

but i want to put link only first image.

Member Avatar for nauticalmac

Can you show the page with the problems? If all the sliders show, then possibly the javascript that runs the slideshow has failed, maybe because of a js error you created. Do you know how to look at the js console?
Try posting the js you have written to add the links.

Member Avatar for vivek1995

yes i know how to look js console. but i'm not a great designer i need only put 6 new link only one image slider not all. i think i need jquery code to show 6 link in only one image.

Member Avatar for nauticalmac

There's not enough information to help.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.