I'm trying to populate a Bootstrap slider with image file names taken from a database. My main.go contains -
slide_query := fmt.Sprintf("SELECT id, coalesce (slider_url, '') as slider_url, coalesce (slider_image_path, '') as slider_image_path, coalesce (user_id, '') as user_id, coalesce (image_sr_no, '') as image_sr_no FROM bz_slider_details where user_id = %d ORDER BY image_sr_no ASC", profile.Id)
slideDB, err := db.Query(slide_query)
if err != nil {
log.Println("Issues with SLIDER query")
panic(err.Error())
}
offers := Offers{}
resOffers := []Offers{}
for slideDB.Next() {
var id, user_id int64
var slide_url, slider_image_path, image_sr_no string
log.Println(slide_query)
err := slideDB.Scan(&id, &slide_url, &slider_image_path, &user_id, &image_sr_no)
if err != nil {
log.Println("db scan issues for slideDB")
panic(err.Error())
}
log.Println("Offers query executed properly")
offers.Id_offers = id
offers.Slider_url = slide_url
offers.Slider_image_path = slider_image_path
offers.User_id = user_id
offers.Image_sr_no = image_sr_no
offers.Slide_count = Count
resOffers = append(resOffers, offers)
log.Printf("Showing offers slice - %#v %#v %#v %#v %#v", offers.Slider_url, offers.Slider_image_path, offers.User_id, offers.Image_sr_no, offers.Slide_count)
// log.Println(resOffers)
}
The count of slides in the page is described in offers.Slide_count. Count, an int comes from another query. It is a part of a struct -
type Offers struct {
Id_offers, User_id int64
Slide_count int
Slider_url, Slider_image_path, Image_sr_no string
}
My markup -
<div class="carousel-indicators">
<button type="button" data-bs-target="#bizIcardOffers" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#bizIcardOffers" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#bizIcardOffers" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<h2 style="text-align:center">Offers</h2>
<div class="carousel-inner">
<div class="carousel-item active">
<a href="{{$n := index . 0}}{{$n.Slider_url}}"><img src="{{$n := index . 0}}{{$n.Slider_image_path}}" class="d-block w-100" alt="..."></a>
</div>
<div class="carousel-item">
<a href="{{$n := index . 1}}{{$n.Slider_url}}"><img src="{{$n := index . 1}}{{$n.Slider_image_path}}" class="d-block w-100" alt="..."></a>
</div>
<div class="carousel-item">
<a href="{{$n := index . 2}}{{$n.Slider_url}}"><img src="{{$n := index . 2}}{{$n.Slider_image_path}}" class="d-block w-100" alt="..."></a>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#bizIcardOffers" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#bizIcardOffers" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div> <!--Offer slider-->
</div>
How can I add the sliders based on the slider image files actually present in the database? There can be upto 5 images in the slider but their can be 0 files as well. If the count is 0, the entire mark up should be hidden.
I'm using index and it is working right by showing the right images in every index, I see usage of range in the template every where. But range is like a loop and the html is top to down.
Is there any way to make changes in the existing code and hide the mark up whenever the slider images have exhausted?