[FIXED] How can I display HTML from a string inside a Bootstrap Carousel?

Issue

I have a Vue Component for the Bootstrap Carousel, which has the following code:

<template>
    <div :id="id" class="carousel slide" data-bs-ride="carousel">
        <div class="carousel-inner">
            <div :id="'carousel'+subject.id" v-for="subject,index in subjects" :key="subject.id" :class="index === 0 ? 'carousel-item active' : 'carousel-item'">
                <h2>{{ subject.title}}</h2>
                <span>{{ subject.subtitle}}</span>
                <div>{{ subject.html_content}}</div>
            </div>
        </div>
        <button class="carousel-control-prev" type="button" :data-bs-target="'#'+id" 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="'#'+id" data-bs-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Next</span>
        </button>
    </div>
</template>
<script>
export default {
    props: ['id', 'subjects'],
}
</script>

I want to know how I can display the html string (like '<p>some content</p>') inside the carousel.

I tried using DOMParser() and parseFromString() but that injected all html content inside a single item of the carousel, and not the corresponding item for that element.

I would appreciate if the solution doesn't involve BootstrapVue as I'm using Vue-3.

Solution

You can use v-html <div v-html="subject.html_content"></div>:

new Vue({
  el: "#demo",
  data() {
    return {
      subjects: [{id: 1, title: 'aa', subtitle: "aaa", html_content: '<b>sss</b>'}, {id: 2, title: 'bb', subtitle: "bbb", html_content: '<b>sss</b>'}, {id: 3, title: 'cc', subtitle: "ccc", html_content: '<b>sss</b>'}],
      id: 1
    }
  }
})

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.min.js" integrity="sha384-ODmDIVzN+pFdexxHEHFBQH3/9/vQ9uori45z4JjnFsRydbmQbmL5t1tQ0culUzyK" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
  <div :id="id" class="carousel slide" data-bs-ride="carousel">
    <div class="carousel-inner">
      <div :id="'carousel'+subject.id" v-for="(subject,index) in subjects" :key="subject.id" :class="index === 0 ? 'carousel-item active' : 'carousel-item'">
        <h2>{{ subject.title}}</h2>
        <span>{{ subject.subtitle}}</span>
        <div v-html="subject.html_content"></div>
      </div>
    </div>
    <button class="carousel-control-prev" type="button" :data-bs-target="'#'+id" 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="'#'+id" data-bs-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="visually-hidden">Next</span>
    </button>
  </div>
</div>

Answered By - Nikola Pavicevic

Answer Checked By - Timothy Miller (PHPFixing Admin)

Read More

[FIXED] How to use carousel with a vertical thumbnail

Issue

I want to use slickjs carousel for an e-commerce product single page with a vertical thumbnail and zoom

if you have an idea please help, thanks in advance

Solution

You could use css with flexbox and change the flex-direction: coumn; on the same container that you are targeting with slick. You might have to change some other properties such as margin and padding to position them properly, but that would be a simple css based solution.

Answered By - Connor Smyth

Answer Checked By - Senaida (PHPFixing Volunteer)

Read More

[FIXED] syntax error, unexpected 'endforeach' (T_ENDFOREACH), expecting end of file (in my slider view - carousel)

Issue

I don't know what to do, my index page doesn't work... I mean it working perfectly before I add function slider that already connect to database... What must I do?

An uncaught Exception was encountered

Type: ParseError

Message: syntax error, unexpected 'endforeach' (T_ENDFOREACH), expecting end of file

Filename: C:\xampp\htdocs\eat\application\views\front\index.php

Line Number: 96

Backtrace:

File: C:\xampp\htdocs\eat\application\controllers\index.php Line: 15 Function: view

File: C:\xampp\htdocs\eat\index.php Line: 315 Function: require_once

view: index.php

<!--- Carousel --> 
<div id="myCarousel" class="carousel slide" data-ride="carousel">
                <div class="carousel-inner">
                    <?php foreach ($slider as $slider) ?>
                    <div class="item-active">
                        <img src="<?php echo base_url('upload/banner/'.$banner->image)?>">
                        <div class="carousel-caption">
                            <h3><?=$slider->name?></h3>
                            <p><?=$slider->description?></p>
                        </div>
                    </div>
                    <div class="item">
                        <img src="<?php echo base_url('upload/banner/'.$banner->image)?>">
                        <div class="carousel-caption">
                            <h3><?=$slider->name?></h3>
                            <p><?=$slider->dekripsi?></p>
                        </div>
                    </div>
                </div>
                <a class="left carousel-control" href="#myCarousel" data-slide="prev">
                    <span class="glyphicon glyphicon-chevron-left"></span>
                    <span class="sr-only"> previous</span>
                </a>
                <a class="right carousel-control" href="=#myCarousel" data-slide="next">
                    <span class="glyphicon glyphicon-chevron-right"></span>
                    <span class="sr-only"> next </span> 
                </a>
            </div>
            <?php endforeach; ?> 

controller: index.php

<?php defined('BASEPATH') OR exit('No direct script access allowed');

class Index extends CI_Controller {

    public function __construct()
    {
        parent::__construct();
        $this->load->model("Indexweb_model");
        $this->load->library('form_validation');
    }

    public function index()
    {
        $data["slider"] = $this->Indexweb_model->getAll();
        $this->load->view("front/index", $data);
    }
}

model: Indexweb_model.php

<?php defined('BASEPATH') OR exit('No direct script access allowed');

class Indexweb_model extends CI_Model
{
    private $_table = "slider";

    public $id_slider;
    public $name;
    public $deskripsi;
    public $image;

    public function rules()
    {
        return [
            ['field' => 'name',
            'label' => 'Name',
            'rules' => 'required']
        ];
    }

    public function getAll()
    {
        return $this->db->get($this->_table)->result();
    }

    public function getById($id)
    {
        return $this->db->get_where($this->_table, ["id_slider" => $id])->row();
    }

    public function save()
    {
        $post = $this->input->post();
//      $this->id_slider = uniqid();
        $this->name = $post["name"];
        $this->deskripsi = $post["deskripsi"];
        $this->image = $this->_uploadImage();
        $this->db->insert($this->_table, $this);
    }

    public function update()
    {
        $post = $this->input->post();
        $this->id_slider = $post["id"];
        $this->name = $post["name"];
        $this->deskripsi = $post["deskripsi"];
        if (!empty($_FILES["image"]["name"])) {
            $this->image = $this->_uploadImage();
        } else {
            $this->image = $post["old_image"];
        }
        $this->db->update($this->_table, $this, array('id_slider' => $post['id']));
    }

    public function delete($id)
    {
        $this->_deleteImage($id);
        return $this->db->delete($this->_table, array("id_slider" => $id));
    }

    private function _uploadImage()
    {
        $config['upload_path']          = './upload/slider/';
        $config['allowed_types']        = 'gif|jpg|png|jpeg';
        $config['upload_max_filesize']  = '100000M';
        $config['post_max_size']        = '100000M';
        $config['file_name']            = basename($_FILES["image"]["name"]);
        $config['overwrite']            = true;

        $this->load->library('upload', $config);

        if ($this->upload->do_upload('image')) {
            return $this->upload->data("file_name");
        }
    }

    private function _deleteImage($id)
    {
        $slider = $this->getById($id);
        if ($slider->image != "default.jpg") {
            $filename = explode(".", $slider->image)[0];
            return array_map('unlink', glob(FCPATH."upload/slider/$filename.*"));
        }
    }

}

Solution

Your syntax is wrong. You were missing a colon and your endforeach was in the wrong place.

Try this instead:

<!--- Carousel --> 
<div id="myCarousel" class="carousel slide" data-ride="carousel">
    <div class="carousel-inner">
        <?php foreach ($slider as $slider): ?>
        <div class="item-active">
            <img src="<?php echo base_url('upload/banner/'.$banner->image)?>">
            <div class="carousel-caption">
                <h3><?=$slider->name?></h3>
                <p><?=$slider->description?></p>
            </div>
        </div>
        <div class="item">
            <img src="<?php echo base_url('upload/banner/'.$banner->image)?>">
            <div class="carousel-caption">
                <h3><?=$slider->name?></h3>
                <p><?=$slider->dekripsi?></p>
            </div>
        </div>
        <?php endforeach; ?> 
    </div>
    <a class="left carousel-control" href="#myCarousel" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span>
        <span class="sr-only"> previous</span>
    </a>
    <a class="right carousel-control" href="=#myCarousel" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right"></span>
        <span class="sr-only"> next </span> 
    </a>
</div>

Answered By - geoidesic

Read More